Выравнивание картинки по центру в div’е

Четверг, Июль 19, 2018, 2:43 | Вебмастеру | 222 просм. | 6 комментариев

В этой заметке речь пойдет о случаях, когда нужно посредством 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) законно центрирует содержимое блока по горизонтали.

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

А ещё вас может заинтересовать...

Метки: ,

6 комментариев к посту “Выравнивание картинки по центру в div’е”

  1. Роман:

    Извините что я старый записи комментирую, но этот вопрос для меня тоже был насущным. Выравнивание по горизонтали не помню чтобы было проблематичным, я использовал margin auto чаще для блоков div. Есть один минус в этом — нужно указывать ширину элемента. Т.е. указать конкретную ширину картинки или div. В вашем случае, вордпресс указывает ширину для всех изображений автоматически, поэтому этот вариант действительно наиболее подходящий.

  2. Роман:

    Там, где структура кода посложнее, я использую display: flex; align-items: center;
    С помощью flex выравниваются фотографии и по вертикали без особых проблем.

    • Роман, в тексте записи об этом есть:
      > Проблема осложнялась тем, что базовое выравнивание в родительском div’е — justify. По этой причине не было возможности воспользоваться flex.
      Не работает flex в этом случае, пробовала.

  3. Роман:

    Я упустил из виду то, что ширина картинки определяется браузерами и margin сработает в любом случае. Ширину приходится указывать в div.

Оставить комментарий


Вы не бот? Докажите! Решите простой пример: *