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 trialJustin Wampler
4,523 PointsHow 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?
3 Answers
Cory Harkins
16,500 Pointsmargin: 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
4,523 PointsThat'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
16,500 PointsCan you post your css regarding the elements as well as the html?
Justin Wampler
4,523 PointsI'm not using workspaces, just watching the video.
Brian Oliver
2,681 PointsHey 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
Steve Gallant
14,943 PointsSteve Gallant
14,943 PointsBecause he changed the display of .main-nav li to inline-block, wouldn't that make the li elements obey text-align?