Как расположить картинку и текст в строку?

Question

[Esklif]

Хочу чтобы иконки шли перед ссылками, однако при применении свойства инлайн блок все съезжает и становится одной строчкой, а картинки все равно находятся сверху текста
https://pastebin.com/RW0SvjZY

Answer 1

[Илья Салигжанов]

Для parent-элемента задайте

li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Answer 2

[Vefolio]

Если вы хотите расположить картинку и текст в одной строке, можно воспользоваться свойством display: inline-block; для обоих элементов. Однако, как вы уже заметили, картинка может оказаться сверху текста.

Чтобы картинка была выровнена по вертикали с текстом, можно использовать свойство vertical-align и задать ему значение middle.

Пример кода:

<div>
<img src="icon.png" alt="icon" style="display: inline-block; vertical-align: middle;">
<a href="#" style="display: inline-block; vertical-align: middle;">Ссылка</a>
</div>

В этом примере мы создали контейнер div и добавили в него изображение и ссылку, оба с применением свойства display: inline-block; и vertical-align: middle;. Это помогает выровнять их по вертикали.

Вы также можете использовать другие способы выравнивания, такие как flexbox или grid. Например, вы можете создать контейнер с display: flex; и align-items: center;, чтобы выровнять элементы по вертикали.

Пример кода:

<div style="display: flex; align-items: center;">
<img src="icon.png" alt="icon">
<a href="#">Ссылка</a>
</div>

В этом примере мы создали контейнер с display: flex; и align-items: center;, чтобы выровнять изображение и ссылку по вертикали. Картинка и ссылка будут автоматически выровнены по центру контейнера.

Источник https://aie24.ru/states/kak-raspolozhit-kartinku-i...