Question

我正在使用html5 boilerplate和他们的.ir类。我点击了徽标，我想把它放在页面中心，但到目前为止还没有运气。我试过保证金：0自动;和text-align：center;但它们似乎都不起作用。

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

Answer 1

我们不建议您直接将样式添加到帮助程序类。这意味着您不能将它们重新用于需要.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);
    }

Answer 2

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

Answer 3

在.ir

中添加以下内容

background-position: center center;

html5样板中的中心徽标

3 个答案: