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

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,887 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,472 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

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,472 Points

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

Justin Wampler
Justin Wampler
4,523 Points

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

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