Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Posted by Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

Why text-align: center aligns not only text but also blocks?

In the CSS Layout Basics - Using Inline-Block to set width... lesson Guil has used text-align: center in the .main-header to align h1 & ul blocks on the page.

My question: Why text-align: center affects blocks alignment, whereas it should only center text inside blocks.

Hope my questions makes sense.

3 Answers

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

Hi Edgars,

When centering elements keep the following basic rules in mind:

(A) When centering block level elements always use: margin: 0 auto; It is best to use this on elements that have a width of 90% or less. If you use margin: 0 auto; on elements that take up 100% width of it's parent container you will not see it center.

(B) margin: 0 auto; will ONLY work on block level elements or elements set to display: block;

(C) The width property does not work on inline elements such as span, but will work on the img element. Width does work on elements set to display: inline-block;

(D) To center text use: text-align: center;

The text-align property in CSS is used for aligning the inner content of a block element. I will want to put text-align in the block level elements CSS. For example:

p {
 text-align;
}

So, while text-align affects text, it also affects all inline and inline-block elements that are children of any block level elements.

You will need to play around with centering elements. See how center works for inline vs block level elements. See how the width property effects inline vs block level elements. And so on.

Thanks, Julie

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Text-align affects all inline objects. It will not effect anything set to "display: block;" but it will affect "display: inline;" and "display: inline-block;"

It is very handy for layout alignment in fluid webdesign without using things such as flex-box that are not fully supported across all browsers.

Erik S.
Erik S.
9,789 Points
Erik S.
Erik S.
9,789 Points

Hi Edgars, indeed the name of the property text-align is a bit misleading. Text-align can be used to align the inner content of a block element, which is usually text, but can be all inline or inline-block elements in that container. If you need further information you can find it here.