如何在屏幕中心制作li'images(响应)

时间:2016-11-29 09:58:59

标签: html css twitter-bootstrap

基本上我想在屏幕中间有一个带有4个社交图标的小排。我想让它在屏幕中间,我在移动设备,笔记本电脑或标签页面打开我的页面。

我已应用宽度:50%但问题是ul li的图像在左侧。我能做的就是对所有屏幕分辨率使用媒体查询,但这对于每个屏幕/分辨率点都不好,我必须进行查询,这不是一个好的做法。

我认为我错过了关于这一点的更容易的事情,但我没有得到。

您可以看到我的代码here

简而言之:我希望在每个屏幕(大,小)中都有我的所有4个图标,并且它们之间有固定的间隙。

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

2 个答案:

答案 0 :(得分:2)

您只需使用flex即可。

回顾以下答案:

&#13;
&#13;
.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 */
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我不确定你是否喜欢这种方式。但是我立刻有了这个想法。

&#13;
&#13;
ul.footerUl{

text-align:center;
}
  
ul li{list-style-type:none;display:inline-block;}
ul li img{ margin:5px 20px;}
&#13;
<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>
  
</ul>
&#13;
&#13;
&#13;