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 trialIvo Vieira
5,443 PointsWhy if I remove .name to be an inline-block element, the h1 stops being centered and goes to the left of the layout?
I was testing it inside the media query:
.name, .main-nav li { display: inline-block; }
Since you the list items appear centered and under the h1, what is the need to have the .name as a inline-block and why if I make it just a block element, removing it from the code above, the h1 goes to the left of the layout?
I was expecting the h1 still to be centered because, outside the media query, you still have the code:
.name, .main-nav li { text-align: center; background: #fff; margin-top: 6px; margin-bottom: 6px; }
Ivo Vieira
5,443 PointsHi Steven, thank you for trying to help.
The snapchat is: https://w.trhou.se/t6opqmf326
The only change I did to the project file was commenting the ".name" in the CSS file, at the end of the media query, in order to not be displayed as "inline-block". With this change, I'm not understanding why the ".name" stops being centered, as I was expecting it to become a block element, so before in the CSS the ".name" already receives the property "text-align: center". I'm sure I'm thinking something wrong, I just would love to understand what and why. Thanks a lot in advance!
3 Answers
Steven Parker
231,072 PointsIt's because of the header properties.
When the "name" element is "inline-block", it is centered by the "text-align: center
" property of the container it is in, the "main-header".
But "text-align" only applies to inline elements, so when you comment out the "name" selector for the rule that applies the inline-block setting, it reverts to being a block element and is then immune to the container's "text-align" property.
Block elements can be centered other ways, such as setting their horizontal margins to "auto".
ywang04
6,762 PointsHi Steven,
Thanks for your answers. Just a quick question. Below is the definition of text-align(https://developer.mozilla.org/en-US/docs/Web/CSS/text-align?v=example):
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.
It seems like the text-align controls "inline content" like text instead of "inline element". What I am thinking is after .name element becomes to block element, it needs to take up the whole line as usual. Thus, the .name element is not centered. That's just my two cents.
Any comments are appreciated. :)
Steven Parker
231,072 PointsI think we're mostly saying the same thing, except that text-align
does apply to inline elements. That's why the entire "name" element was centered until the display mode was changed to block
.
Ivo Vieira
5,443 PointsThank you, Steven! I realized I was misinterpreting the "text-align" property.
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsHey Steven , I got that point of "text-align" and I was just experimenting with my code and when i change the display property from "inline-block" to "inline" in below code: .name, .main-nav li { display: inline-block; } The list items got disappeared. Why? What happened actually there when i changed it to inline?
Steven Parker
231,072 PointsWhen you change it to "inline" it no longer serves as a container for the block-mode link. So the link overflows the list item onto the next line and the list item width collapses to 0. The link itself is still visible, but since the text color is the same as the header's background it doesn't stand out anymore unless you hover the mouse over it and change the color.
Steven Parker
231,072 PointsSteven Parker
231,072 PointsI think we may need to see the complete CSS and HTML code to do a proper analysis.