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

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

В этой заметке речь пойдет о случаях, когда нужно посредством CSS выровнять картинку по центру родителя.

Чаще всего в таких случаях предлагают обернуть картинку каким-нибудь <p> и присвоить стилю этого <p> свойство text-align: center:

<head>
<style>
.centerimage {text-align: center;}
</style>
</head>
 
<body>
<p class="centerimage"><img src="//somepath/img.png"></p>
</body>

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

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

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

Метки: ,

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


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