March 20, 2012

Center logo in html5 boilerplate

Question by Barbara

I’m using html5 boilerplate and their .ir class. I made the logo clickable, I want to center it in the page but so far no luck. I tried margin: 0 auto; and text-align: center; but they both don’t seem to work.

The html

   <a href="/"><h1 class="ir">logo header</h1></a>

and the css

    h1 {
    height: 373px;
    }

    .ir {
    display: block;
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    background-color: transparent; 
    background-repeat: no-repeat; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background-image: url(http://i.imgur.com/yYnyJ.jpg);
    }
    .ir br { display: none; }

Answer by Starx

Add background-postion: center; to the rule. You might want to use top center as the value, if you want the align image at the top and centered at the same time.

Note:: The image size have to be subsequently smaller than the <h1> to appear on the center.

Moreover, I would recommend using the shorthand property as well.

.ir {
    display: block;
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center;
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!