[英]Footer UL won't center
我试图用一些链接图标将页脚居中,但它行不通,仍然浮动在右侧。
.links { list-style: none; float: left; display: block; margin: 0 auto; width: 300px; } .links ul li { display: inline-block; } .links ul img { padding: 2.5% 4%; height: 40px; }
<div class="links"> <ul> <li><a href="x"><img src="img/mail.png" alt="Email"></a></li> <li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li> <li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li> <li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li> <li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li> </ul> </div>
如我所见, div
向左浮动。 您需要删除float: left;
从.links
样式,然后将text-align: center
添加到中心列表项。
.links { list-style: none; display: block; margin: 0 auto; width: 300px; text-align: center; } .links ul li { display: inline-block; } .links ul img { padding: 2.5% 4%; height: 40px; }
<div class="links"> <ul> <li><a href="x"><img src="img/mail.png" alt="Email"></a></li> <li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li> <li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li> <li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li> <li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li> </ul> </div>
尝试将.links CSS样式属性应用于实际的<ul>
而不是父容器。 固定宽度和自动页边距的组合将使它在屏幕上居中。 这也将允许您根据需要设置.links
容器的样式。
希望这会有所帮助。
谢谢!
CSS
.links ul {
list-style: none;
display: block;
margin: 0 auto;
width: 300px;
text-align: center;
}
.links ul li {
display: inline-block;
}
.links ul img {
padding: 2.5% 4%;
height: 40px;
}
HTML
<div class="links">
<ul>
<li><a href="x"><img src="img/mail.png" alt="Email"></a></li>
<li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li>
<li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li>
<li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li>
<li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.