CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

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
203,995 Points

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

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
203,995 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,748 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
203,995 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.

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,617 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
203,995 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.