Свойство text-align
используется для выравнивания элементов по горизонтали, а не по вертикали.
Просто измените элемент <ul>
на flexbox, используя display: flex;
, а затем используйте свойство align-items
для вертикального центрирования<li>
предметов.Аналогичным образом измените элементы <li>
на flexbox и используйте это же свойство для вертикального центрирования текста и значка.
Также вам необходимо изменить селектор css li hover
на li:hover
.
Проверьте и запустите следующий Фрагмент кода для практического примера выше:
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
display: flex;
width: 100%;
height: 50px;
align-items: center;
}
li {color: white;text-decoration: none;
display: flex;
align-items: center;
}
li:hover {background-color: #111;}
<ul>
<li>
Home
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
</li>
<li>News</li>
</ul>