基本上我想在屏幕中间有一个带有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;}
答案 0 :(得分:2)
您只需使用flex
即可。
回顾以下答案:
.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;
答案 1 :(得分:0)
我不确定你是否喜欢这种方式。但是我立刻有了这个想法。
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;