Как отцентрировать картинки любого размера по вертикали и горизонтали в строке?

Question

[ligisayan]

Есть сетка с картинками в 4 столбиках. Мучаюсь над тем, чтобы отцентрировать картинки по вертикальному и горизонтальному центру на любом разрешении вне зависимости от размеров картинки (высоты). Как это сделать используя только стили, не скрипты и не используя flex, т.к. нужна кроссбраузерность ie9+? Фидл

<div class="row">
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/70x81">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/100x33">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/100x19">
  </div>
  <div class="col-sm-3 col-xs-3">
    <img src="http://placehold.it/80x72">
  </div>
</div>

Comments

[Сергей Мурзин]

А высота контейнера с картинкой как определяется?
Например:
— фиксированная, например 50px,
— пропорционально от ширины, например 2/3 от ширины,
— по высоте максимальной картинке (это сложнее).

[ligisayan]

Сергей Мурзин: если бы фиксированная высота была, то вопроса бы не стояла - я хочу найти универсальный вариант, когда бы высота роли не играла, т.е. да - по высоте максимальной картинки в строке, но заранее ее высоты не знаем

[Сергей Мурзин]

ligisayan: Понадобиться ломать бутстрап и работать с inline-block а не с float элементы.
Если такое устроит, то отпишу как минимум один вариант. Готов?

[Сергей Мурзин]

https://jsfiddle.net/7t8svmnc/

[Kovalsky]

Сергей Мурзин: а justify зачем? Он вроде не играет роли, ничего не меняется если его брать.

[Сергей Мурзин]

Добавил еще до того как дал ширину для div.img. Сейчас да, justify никакой роли не играет.

[Сергей Мурзин]

Никита Полевой: https://jsfiddle.net/7t8svmnc/1/

Answer 1

[iBird Rose]

https://jsfiddle.net/iBird/mt6tv6xu/2/

Comments

[ligisayan]

iBird Rose единственный момент, что у вас задается определенная высота, но меня очень заинтересовало фишка с .col-sm-3:before {} - до сих пор не могу понять - как он влияет на центрирование блоков?

[iBird Rose]

ligisayan: vertical-align: middle; по чему то же должен выравнивать. а before как создает элемент с нулевой шириной и с какой то высотой, по которому и будут выравнены все элементы.

[ligisayan]

iBird Rose: аа, понял, спасибо

Answer 2

[ligisayan]

Есть и еще более крутое решение даже без задания высоты фидл

Answer 3

[Kovalsky]

Ну можно попробовать использовать vertical-align и вспомогательный элемент. Здесь написано как это работает и как можно это дополнительно допилить чтоб и до IE доходило.