Leo the lion Leo the lion - 4 days ago 5
HTML Question

How to make li'images in center of screen(responsive)

Basically I want to have a small row with 4 social icons in middle of screen. I wanted to have it middle of screen wheather I am opening my page in mobile, laptop or tab.

I have applied width:50% but issue is ul li's images are in left side. What I can do is to use media queries for all screen resolution but that will be not good as then for every screen/resolution point I have to make queries which is not good practise.

I think I am missing something easier about this point but I am not getting that.

You can see my code here

In short : I want to have my all 4 icons in middle of row in every screen(big, small) with fix gap between them.

HTML

<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<div class="clearfix"></div>
</ul>


CSS

.clearfix{clear:both;}
ul li{list-style-type:none;float:left;padding-left:7%;}
ul li:first-child{padding-left:0px !important;}
ul li:last-child{padding-left:0px !important;}
ul{padding-left:0px;width:50%;margin-left:auto;margin-right:auto;}

Answer

You can simply use flex for doing that.

Review the answer below :

.clearfix{
  clear: both;
}

ul li{
  list-style-type: none;
  float: left;
  padding-left: 20px;
}

ul li:first-child{
  padding-left: 0px !important;
}

ul li:last-child{
  padding-left: 0px !important;
}

ul{
  padding-left: 0px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.footerUl {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
<ul class="footerUl">
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
  </li>
  <li>
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">   
  </li>
  <div class="clearfix"></div>
</ul>

Comments