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

Posted by Ivo Vieira
Ivo Vieira
5,443 Points

Why 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; }

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I think we may need to see the complete CSS and HTML code to do a proper analysis.

Ivo Vieira
Ivo Vieira
5,443 Points

Hi 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
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It'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
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

Hi 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
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I 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
Ivo Vieira
5,443 Points
Ivo Vieira
Ivo Vieira
5,443 Points

Thank you, Steven! I realized I was misinterpreting the "text-align" property.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Hey 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
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

When 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.