Как выровнять картинку и текст на одной линии?

Как можно правильно расположить картинку вместе с текстом в навбар меню?
  • 30 мая 2024 г. 11:11
Ответы на вопрос 2
Для выравнивания картинки и текста на одной линии можно использовать CSS свойство `vertical-align: middle;`. Также можно применить другие свойства, такие как `display: inline-block;` или `flexbox`.

Чтобы правильно расположить картинку вместе с текстом в навбар меню, можно создать контейнер для картинки и текста и применить к нему нужные CSS стили для выравнивания элементов. Например, можно использовать flexbox для создания гибкого макета или задать ширину и высоту для картинки, а затем применить `vertical-align: middle;` к тексту для их выравнивания.
<div class="navbar-item">
    <img src="icon.png" class="navbar-icon">
    <span>dvrr</span>
</div>

.navbar-item {
    display: inline-flex;
    align-items: center; /* элементы выравниваются по центру на одной строке */
}

.navbar-icon {
    margin-right: 8px; /* отступ между иконкой и текстом */
}
Похожие вопросы