Question

基本上我想在屏幕中间有一个带有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;}

Answer 1

您只需使用flex即可。

回顾以下答案：

＆＃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;

Answer 2

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

＆＃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;

如何在屏幕中心制作li'images（响应）

2 个答案: