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

HTML

Posted by Byron Farrell
Byron Farrell
5,700 Points

Centering Text

Hi,

I am trying to understand html/css as much as possible. In the code below I centered all text in the header tag. My question is why does the text in the span element get centered since its in the span tag not the header tag? If all child tags of the header get their text centered, why doesn't the text inside <a> get centered?

Link to my code: https://w.trhou.se/doik0mllkr

Thanks for your time!

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The text-align setting is inherited.

That explains why the span contents are centered. But you'll notice they are not centered on the page, just within that portion of the header not taken up by the nav element.

The link (a) contents are also centered, but you don't see it because they are all inside list item (li) containers, and those are all floated to the right side.

Byron Farrell
Byron Farrell
5,700 Points

Ah ok so all child tags of the header tag will have their text centered. How do I get my span tag to center its text in relation to the full width of the header instead of the full width of the header - the nav width?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You would need the span (or the span's area) to extend across the whole page.

One way to do this would be to use absolute positioning on the nav element. Positioned elements aren't part of the normal page flow.

header nav {
    position: absolute;
    right: 0;
}
Byron Farrell
Byron Farrell
5,700 Points

Thanks again Stephen! You've been a great help! :D