Почему не получается выровнять вертикально текст в теге a (вложеном в li)?

Question

[Иван Смирнов]

<ul>
    <li><a href="#"><img src="https://s1.1zoom.ru/big0/72/285594-alexfas01.jpg" alt="">John</a></li>
    <li><a href="#"><img src="https://s1.1zoom.ru/big0/72/285594-alexfas01.jpg" alt="">Alaya</a></li>
    <li><a href="#"><img src="https://s1.1zoom.ru/big0/72/285594-alexfas01.jpg" alt="">Mikle</a></li>
  </ul>

ul li a {
  display: block;
  padding: 2%;
  color: black;
  text-decoration: none;
  font-weight: 900;
  font-size: 130%;
  vertical-align: middle;
}

Answer 1

[азаза]

потому, что гладиолус. - display:block

Comments

[Иван Смирнов]

Недопёрло. Если я уберу display: block то блок сузится до минимальных размеров. И где тогда выравнивать?

[азаза]

vertical-align применяется к строчным элементам и к строчным блокам
inline
inline-block

используйте в данном случаи
grid или flex

[азаза]

вложите в тег а span

<ul>
<li><a><span><img src="https://s1.1zoom.ru/big0/72/285594-alexfas01.jpg" alt="">John</span></a></li>
<li><a><span><img src="https://s1.1zoom.ru/big0/72/285594-alexfas01.jpg" alt="">John</span></a></li>
</ul>

ul li a{display:grid; align-items:center;}

[Ankhena]

natojezlo, только без span и flex вместо grid, все таки поддержка получше.