Вертикальное выравнивание текста рядом с изображением?
Почему не работает vertical-align: middle, но vertical-align: top работает?
Я столкнулся с проблемой при использовании свойства CSS vertical-align. У меня есть следующий код:
span {
vertical-align: middle;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>
Я ожидаю, что текст внутри <span> будет выровнен по центру относительно изображения, но вместо этого ничего не происходит. Однако, когда я использую vertical-align: top, выравнивание работает как задумано.
Почему vertical-align: middle не срабатывает в данном случае? Есть ли какие-то дополнительные требования или ограничения, о которых я не знаю?
4 ответ(ов)
Потому что вам нужно установить line-height на высоту div, чтобы это работало.
Для записи: команды выравнивания не должны работать на элементе SPAN, поскольку это встроенный тег, а не блочный тег. Такие вещи, как выравнивание, отступы, поля и т.д., не будут работать на встроенном элементе, потому что смысл встроенных тегов заключается в том, чтобы не нарушать поток текста.
CSS делит HTML теги на две группы: встроенные и блочные. Найдите в интернете "css блочные и встроенные" — и вам откроется отличная статья...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Понимание основных принципов CSS является ключом к тому, чтобы это не было столь раздражающим).
Другой вариант - это установить line-height текста в <div> равным размеру изображений. Затем задайте изображениями свойство vertical-align: middle;.
Это действительно самый простой способ.
Чтобы задать свойства для элемента <span>, вы можете использовать следующий CSS код:
span {
display: inline-block;
vertical-align: middle;
}
При использовании свойства vertical-align важно применять display: inline-block;, так как эти свойства связаны между собой. Свойство vertical-align применяется к элементам, которые имеют значение inline или inline-block для свойства display. Таким образом, чтобы правильно использовать vertical-align, необходимо установить display: inline-block;.
Как вертикально центрировать элемент div для всех браузеров с помощью CSS?
Как задать cellpadding и cellspacing с помощью CSS?
Как вертикально центрировать текст с помощью CSS?
Как вертикально выровнять текст в div?
Как вертикально выровнять элементы внутри div?