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 CSS Layout Project Creating and Styling the Layout Containers

Bryan Summers
Bryan Summers
11,864 Points
Posted by Bryan Summers
Bryan Summers
11,864 Points

I'm confused: Why does the .headline class respond when text-align: center is applied?

At 03:01 Guil applies the center value to the text-align property. This centers the img, h1, and span inside the banner. I understand that img and span are inline-elements and so they should rightfully respond to this rule, but why does the h1 also center itself when it is a block-level element? The h1 still displays as a block-level element when I inspect in Chrome and yet it is still centered perfectly. I did not think that text-align worked with block-level elements??

1 Answer

Ryan Hunt
Ryan Hunt
16,091 Points
Ryan Hunt
Ryan Hunt
16,091 Points

The text-align is applied to the entire banner block(div) so every thing in that class is centered. Divs are block level elements.

Bryan Summers
Bryan Summers
11,864 Points
Bryan Summers
Bryan Summers
11,864 Points

Thanks Ryan, I've just realised I've actually misunderstood the text-align property for almost a year, hence my confusion!