Почему вот такой код, не делает изображения по центру?
<div style="height: 200px;">
<img src="img/crystal.png" style="height: 40px; vertical-align: central;" />
</div>
При этом, если вместо изображения будет текст, то все работает.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЭто связано с механикой работы свойства vertical-align: middle;
c помощью него выравниваеться элемены которые стоят в строке относительно друг друга.
Если Вам нужно выровнять картинку относительно центра родительского блока, воспользуйтесь flexbox
:
div {
height: 200px;
display: flex;
align-items: center;
}
Попробуйте исправить на vertical-align: middle; display: inline;
Первая ссылка из гугла говорит:
Свойство CSS vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).
Обратите внимание: строчных элементов и ячеек таблицы. Блок div
по умолчанию, как это не странно, является блочным элементом. Поэтому и не работает.