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

Posted by Stu Cowley
Stu Cowley
26,287 Points

Centering a Logo on my Site

Hey guys,

I'm having a little bit of an issue with positioning my logo central to a container.

Here is what I currently have.

Here is the CSS code I am using:

.branding {
    background: url('../img/logo.png') no-repeat;
    width: 246px;
    height: 180px;
    margin: 0 auto;
    float: left;
    text-indent: -9999px;
}

<div class="col-sm-12">
    <a href="index.php" class="branding">Mundoo Island</a>
</div>

I have tried using text-align: center; to no avail.

I really appreciate any advice on how I can get this fixed cause it has me scratching my head.

I'll also tag Guil Hernandez to speed this along : )

Stu

5 Answers

Ethan Paz
Ethan Paz
7,710 Points

There's a property called background-position: center, which will get the job done. W3Schools reference section should help you out. This link will give you the answer: http://www.w3schools.com/cssref/pr_background-position.asp.

The block property and text-align are insufficient for the job. Block can't center anything. Text-align refers to text elements not images.

Weng Jeff Lee
Weng Jeff Lee
12,865 Points
Weng Jeff Lee
Weng Jeff Lee
12,865 Points

Hi stu, I'm not sure if I can help.. Trying setting your logo to "display: block;"

see if this can help you to solve your problem

Jesse Fisher
Jesse Fisher
10,830 Points
Jesse Fisher
Jesse Fisher
10,830 Points

Hi Stu

One solution would be to apply text-align: center to the container element of .branding rather than to branding itself.

Here is some code that should work.

<div class="col-sm-12 branding-container">
    <a href="index.php" class="branding">Mundoo Island</a>
</div>

.branding-container {
  text-align: center;
}

Or using a Bootstrap provided class, make this change to the HTML only:

<div class="col-sm-12 text-center">
    <a href="index.php" class="branding">Mundoo Island</a>
</div>

The reason text-align: center when applied directly to a.branding does not center it how you want, is because a or anchor elements are "inline" elements rather than "block" elements.

I think this code would work, but it's good practice. But it could give you better understanding of the CSS box model system.

.branding {
  display: block;
  text-align: center;
}
Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hi Weng Jeff Lee,

Changing to "display:block;" just moves it down the page into the navigation. Thanks anyway :)

Stu

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Cheers @Ethan Paz, that's what I was looking for and I managed to get the logo centered finally!

Thanks again,

Stu : D