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

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 class。在 Bootsrap 中，这使您的图像成为块元素。块元素不能与 text-align 对齐。

Bootstrap 3 有一个内置的 center-block class 应该添加到 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 属性？

How do you add multile vendor prefixes to one css property?

html

css

vendor-prefix