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;}