vertical-align: выравнивание строчных элементов
vertical-align управляет вертикальным выравниванием строчного элемента или ячейки таблицы относительно соответствующего контекста.
Назначение
vertical-align управляет вертикальным выравниванием строчного элемента или ячейки таблицы относительно соответствующего контекста.
Как это работает
В строчном контексте baseline, middle, top и другие значения соотносятся со строкой. Значение middle не означает универсальное центрирование блока по высоте родителя.
Пример
<style>
.badge{display:inline-block;width:1em;height:1em;background:#11694e;vertical-align:middle}
</style>
<p><span class="badge" aria-hidden="true"></span> Рядом со строкой текста</p>Что должно получиться
Квадрат выровнен относительно строки текста. Его положение определяется метриками шрифта и значением middle, а не серединой произвольного внешнего контейнера.
Граница применения и частая ошибка
Свойство не центрирует обычный div внутри другого div. Для такой задачи используйте раскладку Flexbox или Grid, а vertical-align оставьте его строчному или табличному контексту.
Самостоятельная проверка
Сравните baseline и middle у небольшого inline-block рядом с текстом. Затем сделайте его display:block и объясните, почему правило перестало решать прежнюю задачу.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.