Как разместить иконку, чтобы текст не съезжал вправо?

Question

[Александр Коновалов]

Здравствуйте! Есть такой код:

<li><img src="assets/img/sound.png" alt="Автозвук">Автозвук</li>

Видно, что текст уезжает вправо от иконки, как расположить его по центру?

Answer 1

[Dymok]

li {
display: flex;
align-items: center;
}

Comments

[Александр Коновалов]

Dymok текст все равно не по центру

[Dymok]

Александр Коновалов, нужно чтобы они были вертикально выровнены по центру?

[Александр Коновалов]

Dymok, надо вот так, то есть текст по центру блока, а картинка левее

Answer 2

[Qwerty Uiop]

https://codepen.io/anon/pen/LBomaY

Comments

[Александр Коновалов]

Qwerty Uiop а если добавить отступ?

[Qwerty Uiop]

Можно текст закинуть в параграф и подвинуть

[Qwerty Uiop]

https://codepen.io/anon/pen/LBomaY

padding-left:4px; менять и всё)

[Александр Коновалов]

Qwerty Uiop, ну текст-то все равно двигается, уходит вправо, в этом и проблема)

[Qwerty Uiop]

так если padding-left:0 поставить то не должен, он тогда прижмется к иконке)

[Александр Коновалов]

Qwerty Uiop, в общем, этот вариант не подходит, не получается так, как нужно

[Qwerty Uiop]

Александр Коновалов, Текст должен быть по центру блока?

https://codepen.io/anon/pen/LBomaY

[Александр Коновалов]

Qwerty Uiop, отступа нет

[Qwerty Uiop]

Александр Коновалов, https://codepen.io/anon/pen/LBomaY так?)

Answer 3

[Adilet Zhuman]

Лучше задайте картинку через псевдо класс и не мучайтесь а текст по центру