如何向一个 CSS 属性添加多个供应商前缀？

我里面有一个图像.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;
}

or

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

有没有一个通用的解决方案？

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

要执行您所要求的操作，您将依次列出每个供应商前缀，最后列出无前缀的版本。如果text-align所需的供应商前缀，您可以这样写：

.img-container {
    text-align: -moz-center;
    text-align: -webkit-center;
    text-align: -o-center;
    text-align: center;
}

然而，text-align: center自 CSS 诞生以来就已经存在，因此从来不需要前缀。所以你实际上可以这样写：

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

这对您的图像不起作用的原因是img-responsive班级。在 Bootstrap 中，这会使您的图像成为块元素。块元素无法对齐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 示例 https://www.bootply.com/F6fJ3J17lX