Question

I’m stumped by something that feels like it should be simple!

I’m trying to center a logo in the centre of a <header>. The logo is made up of an <a> with a background image which is the logo icon and the anchor text is the logo name. I have the logo icon centred using margin: 0 auto; on the <h1> but can’t find a good solution to centering the icon and the text together as one unit.

<header>
  <h1>
    <a href="#" class="logo">Logo Name</a>
   </h1>
</header>

CSS:

header h1 {
  height: 54px;
  width: 54px;
  background: url('../img/logo.png') no-repeat left;
  margin: 0 auto;
}

a.logo {
  font-size: 33px;
  margin: 0 auto;
  display: block;
  padding-top: 20px;
}

Any ideas?

Answer 1

I usually do it like this:

<style>
    .logo{
        margin: 0px auto;
        padding-left: 120px; /* the space between the start of your logo and your text */
        padding-top: 30px; /* the vertical space between the top and your text, to center the logo*/
        display: block; /* very important since normally anchors are inline */
        background: url(path/to/logo.png) top left no-repeat; /* obviously :) */
    }
</style>

It really don’t need to be inside an h1.

When you see results, yo may not see it centered, well, measure your unit, and specify a width and a height inside the .logo rules above.