Как добавить префиксы нескольких поставщиков к одному свойству 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;
}

Я уверен, что есть универсальное решение. Спасибо!


html css vendor-prefix
person Design2u    schedule 16.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Префиксы браузера используются для экспериментальных функций, которые либо еще не готовы для общего использования, либо основаны на частях спецификации 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>

Пример начальной загрузки

person Turnip    schedule 16.03.2015
comment
Не знал о центральном блоке. Спасибо, uʍopǝpısdn! - person Design2u; 16.03.2015