Vertically Align List items in inline Block List

Sarmad Gardezi

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

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

More great articles

How to Disable Jetpack image Sitemaps from WordPress

Sitemaps are files that list each post and page that should be indexed by search engines like Google or Bing.…

Read Story

Use Formula to Copy Row Dynamically in Google Sheet

This tip is one of the most challenging Tip I've shared but it's worth the effort to learn. The index…

Read Story

Facebook live Chat Widget for Websites & Blogs

Everyone now a days uses Facebook for different purposes like brand pages some personal blog pages , some company pages with…

Read Story
Arrow-up