I’ve been thinking about this more than I expected. I tried to align the list items vertically and for some reason I couldn’t do it. I think this should be easy, but it’s not the case. I even Looking for the answer here, but couldn’t find a solution that works for me.
I’m sharing the code that will Vertically align list items in inline block list
body {
background-color: black;
}
.recommend {
text-align: center;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
}
.recommend span{
color: #fff;
}
.media-icons {
left: 0px;
top: 0px;
height: 72px;
}
.recommend ul {
margin: 0;
padding: 0;
}
.recommend li {
display: inline-block;
height: 72px;
}
The HTML Code
<div class="recommend">
<span>network tv stations</span>
<div class="media-icons">
<ul>
<li><img src="https://i.imgur.com/kV2Lnup.png"></li>
<li><img src="https://i.imgur.com/LpzhHQD.png"></li>
<li><img src="https://i.imgur.com/D0VXqIX.png"></li>
<li><img src="https://i.imgur.com/xKXnm0j.png"></li>
</ul>
</div>
</div>
Add this code to the css archive li img {vertical-align: middle;}