-1

I have been messing with this for more time then I was expecting. I am trying to align these list items vertically and I can't do it for some reason. I feel like this should have been easy but it's not. I have been even searching on here for the answer but could not find the right solution for me. what am I doing wrong? 

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;
}
<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>
Will
  • 97
  • 8

1 Answers1

1

add this code to css file li img {vertical-align: middle;}

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;
}
li img {vertical-align: middle;}
<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>
Ramin eghbalian
  • 2,348
  • 1
  • 16
  • 36