Если вы хотите расположить картинку и текст в одной строке, можно воспользоваться свойством 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...