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

【问题标题】：How do you add multile vendor prefixes to one css property?如何为一个 CSS 属性添加多个供应商前缀？
【发布时间】：2015-03-16 19:01:12
【问题描述】：

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

我确信有一个通用的解决方案。谢谢！

【问题讨论】：

标签： html css vendor-prefix

【解决方案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

【讨论】：

不知道中心块。谢谢 uʍopǝpısdn！