Картинка в меню на 100% высоты?

Question

[SplashWeb]

Имеется навигация на сайте с фиксированной шириной.
Выглядит так:

<div class="menu">
	<ul>
		<li><a href="#"><img src="img/1.png">Главная</a></li>
		<li><a href="#"><img src="img/2.png">Ссылка</a></li>
		<li><a href="#"><img src="img/3.png">Ссылка</a></li>
		<li><a href="#"><img src="img/4.png">Ссылка</a></li>
		<li><a href="#"><img src="img/5.png">Ссылка переносится на вторую строку</a></li>
		<li><a href="#"><img src="img/6.png">Ссылка</a></li>
	</ul>
</div>

Пятая ссылка из-за длинного текста переносится на вторую строку и находится под картинкой.
Возможно ли сделать так, чтобы текст переносился, но был не под изображением. То есть область с картинкой занимала 100% пространства высоты?!

P.S. метод с картинками в background через css не подходит.

Answer 1

[mrhat24]

.menu ul li a {
  display: flex;
  align-items: center;
}
.menu ul li a img {
  flex-shrink: 0;
  margin-right: 10px;
}

типо так, если нужно чтобы картинка растягивалась, можно добавить

.menu ul li a img {
  align-self: stretch;
}

но думаю это не надо, т.к. растянутая картинка выглядит не очень.
Если нужно чтобы текст был на уровне с картинкой, а не по центру было выравнивание, то

.menu ul li a {
  display: flex;
  align-items: baseline;
}

Comments

[Ankhena]

.menu ul li a img
Селекторы только покороче сделайте. Двойной вложенности за глаза.

Answer 2

[азаза]

ul{display:grid; grid-template-columns:50px 1fr; list-style-type:none; align-items:center;}
li{background-size: auto 100%;}
li:nth-child(1) {background:url(img/1.png) left center no-repeat ; padding-left:50px;}
li:nth-child(2) {background:url(img/2.png) left center no-repeat ; padding-left:50px;}
li:nth-child(3) {background:url(img/3.png) left center no-repeat ; padding-left:50px;}
li:nth-child(4) {background:url(img/4.png) left center no-repeat ; padding-left:50px;}
li:nth-child(5) {background:url(img/5.png) left center no-repeat ; padding-left:50px;}
li:nth-child(6) {background:url(img/6.png) left center no-repeat ; padding-left:50px;}