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

Justin Wampler
Justin Wampler
4,523 Points
Posted by Justin Wampler
Justin Wampler
4,523 Points

How did text-align center the ul block element? (@ 4:38)

I expected Guil would have to use margin: 0 auto to get the block elements centered but for some reason, text-align did it. Is an unordered list element considered to be text?

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Because he changed the display of .main-nav li to inline-block, wouldn't that make the li elements obey text-align?

3 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points 
margin: 0 auto;

Works for block level items, div's etc.

text-align: center;

Works for in-line elements, however, only centers them to their container (iirc)

display: inline;

or

display: inline-block;

So if you have a webpage of 1200px, and a div of 600px centered by margin, and within that some text elements, the text elements will center themselves to the 600px boundary of the parent element.

I'm sure someone else will correct me if I'm wrong, but I'm pretty sure that's how that works.

Justin Wampler
Justin Wampler
4,523 Points
Justin Wampler
Justin Wampler
4,523 Points

That's how I expect it to work, but as I said it doesn't seem to have worked that way in the vid. I can only assume I'm missing something.

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

Can you post your css regarding the elements as well as the html?

Justin Wampler
Justin Wampler
4,523 Points
Justin Wampler
Justin Wampler
4,523 Points

I'm not using workspaces, just watching the video.

Brian Oliver
Brian Oliver
2,681 Points
Brian Oliver
Brian Oliver
2,681 Points

Hey Justin,

The reason why the elements centered themselves is due to inheritance. The css rule text-align: center is applied to the main header which is the parent of the unordered list and due to inheritance the text-align property is inhereited by the unordered list. So any elements inside of the ul that are inline/inline block will center themselves horizontally within the block level unordered list.

This can be confusing sometimes since not all css properties are inheritable. The ul itself did not center. Lets see why. The ul list is block level as you correctly mentioned so if you look in your developer tools you see it takes up 80% of its parent container as defined earlier. So the ul is still block level and is the reason why the list items display on a new line and again due to inheriting the rule text-align: center it centers its children (the li elements) horizontally inside of it.

Hope this helps! Happy Coding :) Brian