Question

我在.img-container里面有一张图片。我希望图像在容器中居中。

        <div class='col-xs-12 col-sm-4 col-lg-4 img-container'>
             <img class="img-responsive img-about" src='img/About5001000.jpg'> 
        </div>

如何编写处理不同浏览器的css代码。我知道如何对它们进行编码的唯一方法（-moz-center，-webkit-center）：

.img-container {
    padding-right: 0px;
    padding-left: 0px;
    text-align: -moz-center;
}

或

.img-container {
    padding-right: 0px;
    padding-left: 0px;
    text-align: -webkit-center;
}

对于Firefox，Safari和Chrome都没有：

.img-container {
  padding-right: 0px; 
  padding-left: 0px;
  text-align: center;
}

我确信有一种普遍适用的解决方案。谢谢！

Answer 1

浏览器前缀用于实验性功能，这些功能要么尚未准备好供一般使用，要么基于尚未最终确定的css规范部分

text-align: center从一开始就存在，因此从未需要前缀。写点......

.img-container {
    padding-right: 0px;
    padding-left: 0px;
    text-align: center;
}

这对您的图片无效的原因是img-responsive类。在Bootsrap中，这使您的图像成为块元素。块元素无法与text-align对齐。

Bootstrap 3有一个内置的center-block类，应该添加到img标签中......

<div class='col-xs-12 col-sm-4 col-lg-4 img-container'>
    <img class="img-responsive img-about center-block" src='img/About5001000.jpg'> 
</div>

Bootply example

如何将多个供应商前缀添加到一个css属性？

1 个答案: