Как правильно спозиционировать?

Question

[De Slow]

Есть список заключенный в <ul> <li> li1</li> <li>li2</li> </ul>.
В каждом ли, есть иконка которая в виде картинки размером 30х30.
И текст 16px.
Как правильно их прописать, чтобы текст был посередине иконки? В высоту?

<ul>
                  <li><a class="" href="#"><img src="_include/img/icon_side.png">Li1 text</a></li>
                  <li><a class="" href="#"><img src="_include/img/icon_side.png">Li2 Text</a></li>
                 </ul>

Answer 1

[0xD34F]

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

Answer 2

[Lander]

li a {
  line-height: 30px;
}

Оно?

Answer 3

[Илья]

Картинку надо сделать бэкграундом.

Как то так:

<ul>
  <li><a class="" href="#">Li1 text</a></li>
  <li><a class="" href="#">Li2 Text</a></li>
</ul>

a {
  background-image: url(_include/img/icon_side.png);
  background-position: center;
  line-height: 30px;
  text-align: center;
}

Comments

[De Slow]

Фон для текста получается)

[Илья]

Lesha Weal, Не так понял, тогда просто line-height: 30px;