vertical-align не работает с img

107

16 сентября 2019, 17:50

Почему вот такой код, не делает изображения по центру?

<div style="height: 200px;"> 
  <img src="img/crystal.png" style="height: 40px; vertical-align: central;" /> 
</div>

При этом, если вместо изображения будет текст, то все работает.

Answer 1

Это связано с механикой работы свойства vertical-align: middle; c помощью него выравниваеться элемены которые стоят в строке относительно друг друга. Если Вам нужно выровнять картинку относительно центра родительского блока, воспользуйтесь flexbox:

div {
  height: 200px;
  display: flex;
  align-items: center;
}

Answer 2

Попробуйте исправить на vertical-align: middle; display: inline;

http://htmlbook.ru/css/vertical-align

Answer 3

Первая ссылка из гугла говорит:

Свойство CSS vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).

Обратите внимание: строчных элементов и ячеек таблицы. Блок div по умолчанию, как это не странно, является блочным элементом. Поэтому и не работает.