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

Centering the logo within the .banner class

I cannot figure out why the logo will not center on the page after setting the text-align property to "center". The .headline and .tagline both respond (and center), but the logo stays in place.

I can achieve the result by setting the .logo margin to auto, but I'm just wondering why text-align isn't working.

I think I figured it out. I still have a rule that set the display of all three classes (.headline, .tagline, .logo) to block.

2 Answers

Poul Larsen
Poul Larsen
5,902 Points
<style>
.banner,
.main-footer {
    text-align: center;
}
</style>


<div class="banner">
    <img class="logo" src="img/city-logo.svg" alt="City">
    <h1 class="headline">The Best City</h1>
    <span class="tagline">The best drinks and eats in the best city ever.</span>
</div><!--/.banner-->

you can download the project teachers file from the video here:

https://treehouse-code-samples.s3.amazonaws.com/css-layout-basics/4-css-layout-project.zip

the html and css file are in the folders "2-creating-and-styling-layout-containers\final" where you can open the index.htm and the the example in the browser

Thanks Poul! I was just thinking while typing out the question where I could get the original files to compare. I completely forgot about the .zip file under the downloads tab.