Vertically Align List items in inline Block List

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.