В этой заметке речь пойдет о случаях, когда нужно посредством CSS выровнять картинку по центру родителя.
Чаще всего в таких случаях предлагают обернуть картинку каким-нибудь <p> и присвоить стилю этого <p> свойство text-align: center:
<p class="centerimage"><img src="//somepath/img.png" /></p> |
Метод вполне имеет право на существование, но мне не понравился, поскольку громоздок. Хотелось найти такое решение, чтобы в пределах элемента страницы, а это в моем случае <div>, я могла вставлять картинки без всяких оберток и дополнительных стилей. То есть нужен был способ сделать так, чтобы работало:
.mydiv IMG {все картинки в этом div выравниваются по центру} |
Проблема осложнялась тем, что базовое выравнивание в родительском div’е — justify. По этой причине не было возможности воспользоваться flex.
Кстати, совершенно бесполезно делать вот такую штуку:
.mydiv IMG {text-align: center;} |
Потому что свойство text-align применяется только к блочным элементам.
Собственно, здесь кроется и решение проблемы. А решение это такое:
.mydiv IMG {
display: block;
margin: auto;
} |
То есть перво-наперво мы делаем картинку в данном div’е блочным элементом. Блок занимает всю доступную ширину, если ему не приказано иного. Ну, а margin:auto (можно margin: 0 auto) законно центрирует содержимое блока по горизонтали.
Извините что я старый записи комментирую, но этот вопрос для меня тоже был насущным. Выравнивание по горизонтали не помню чтобы было проблематичным, я использовал margin auto чаще для блоков div. Есть один минус в этом — нужно указывать ширину элемента. Т.е. указать конкретную ширину картинки или div. В вашем случае, вордпресс указывает ширину для всех изображений автоматически, поэтому этот вариант действительно наиболее подходящий.
Проблема была именно в том, что ширина картинок варьирует.
Там, где структура кода посложнее, я использую display: flex; align-items: center;
С помощью flex выравниваются фотографии и по вертикали без особых проблем.
Роман, в тексте записи об этом есть:
> Проблема осложнялась тем, что базовое выравнивание в родительском div’е — justify. По этой причине не было возможности воспользоваться flex.
Не работает flex в этом случае, пробовала.
Я упустил из виду то, что ширина картинки определяется браузерами и margin сработает в любом случае. Ширину приходится указывать в div.
А если размеры картинок всегда разные, это не имеет смысла.