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

Create a Conditional Sparkline that Changes Color based on Data

The Sparkline function is one of my favorite functions in Google Sheets, so I'm excited to share this tip.  Create…

Read Story

How to Create Rss Feed for HTML & Static Website

Rss Feed plays an Important role in Building Website Audience. Most of the website get their daily audience through Email…

Read Story

Add breadcrumbs in html and Static website

Breadcrumb is the additional navigational structure used to help the users navigate to the up level of the site easily…

Read Story
Arrow-up