Vertically Align List items in inline Block List

Written by Sarmad Gardezi February 4, 2020

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">
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>

Add this code to the css archive li img {vertical-align: middle;}

If you have any issue you can contact me or Tweet me.

Subscribe to my Email Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.