Выравнивание блоков по центру используя свойство: text-align

[greenrow]

Добрый день!

Иногда возникает потребность размещать блоки  по центру, не задавая родителю  фиксированной ширины.( то есть без использования margin :0 auto,и т.п),

Ширина блока равна их содержимому. А сами блоки имеют фиксированную ширину в пикселях. Свойства display: inline-block и text-align:center позволяет так сделать.

Например http://jsfiddle.net/greenrow/0jaw9bn9/

Это очень удобно при адаптивной верстке (например фото-галлерея), все элементы автоматически выравниваются по центру и не надо использовать css media queries;

Смущает использование строчных стилей для блочных элементов:  text-align:center для div, как то не очень...

Вопрос: есть ли альтернатива  css стилей, которая позволяет задать подобное поведение элементов - центрование дочерних блоков с фиксированной шириной, где родительский блок не имеет фиксированной ширины?

Варианты которые не походят

1. { margin: 0 auto;position:relaive; } (т.к надо обязательно задать для родителя  ширину )

2; {left:50%, margin-left:***fix elem_fidth**;position:absolute } (т.к надо обязательно знать ширину родителя )

Edited April 14, 2017 by greenrow

[klierik]

Меня это вообще не смущает, пользуюсь постоянно, отличное решение.

но можно юзать и flex-box

[Schamil74]

Только хотел предложить.

Как вариант

 

[Endorphin]

Да, так же юзаю для div text-align, но в основном флексбоксы.

[alanreid]

Вариант с использованием свойства display со значением table: https://colintoh.com/blog/display-table-anti-hero#dynamic-horizontal

Другие варианты: https://frontender.info/centering-css-complete-guide/