html5样板中的中心徽标

问题描述：

我使用的是html5 boilerplate及其.ir类。我制作了可点击的徽标，我想将它集中在页面中，但目前还没有运气。我试过margin：0 auto;和text-align：center;但他们都似乎没有工作。html5样板中的中心徽标

的HTML

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

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

答

添加background-postion: center;到规则。如果您想要在顶部对齐图像并同时居中，则可能需要使用top center作为值。

_{说明::图片尺寸必须小于<h1>以显示在中心。}

此外，我会建议使用速记属性。

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

答

添加以下的.IR

background-position: center center;

这也有帮助。谢谢。 – Barbara 2012-03-20 01:44:15

答

我们不建议您直接将样式添加到辅助类中。这意味着您不能在其他需要再次使用.ir类的情况下重用它们（如果您有其他背景需要替换）。请添加类名要与除类图像替换标记称为ir这样的：

<h2 class="ir myh2classname"></h2>

，然后添加你的背景，像这样：

.myh2classname { 
    background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center; 
}

这样，如果你有你想要作为背景使用一些其他部分中的另一图像，所有你需要做的是另一个类名添加到该部分的标记：

<h3 class="ir anotherimagereplacement"></h3>

，然后添加你的背景为这样的其他部分：

.anotherimagereplacement { 
     background: url(path/to/image); 
    }

html5样板中的中心徽标

相关推荐