1

我正在使用html5 样板和他们的 .ir 类。我使徽标可点击,我想将它放在页面中心,但到目前为止还没有运气。我试过 margin: 0 auto; 和文本对齐:居中;但它们似乎都不起作用。

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

3 回答 3

4

我们不建议您直接将样式添加到帮助程序类中。这意味着您不能在.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);
    } 
于 2012-04-11T15:55:54.053 回答
1

添加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;
}
于 2012-03-20T01:21:53.017 回答
0

在 .ir 中添加以下内容

background-position: center center;
于 2012-03-20T01:18:53.237 回答