Justin Wampler4,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?
Cory Harkins16,472 Points
margin: 0 auto;
Works for block level items, div's etc.
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.
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