html - 如何将多个供应商前缀添加到一个 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 需要供应商前缀，您可以这样写:

.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 中，这使您的图像成为 block 元素。 block 元素不能与 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