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;
}
