页脚 UL 不会居中

Posted 2023-03-29

【中文标题】页脚 UL 不会居中

【英文标题】：Footer UL won't center

【发布时间】：2017-05-25 08:27:30

【问题描述】：

我试图用一些链接图标使页脚居中，但它不起作用，它仍然浮动到右侧。

.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" ></a></li>
    	<li><a href="x"><img src="img/twitter.png" ></a></li>
    	<li><a href="x"> <img src="img/tumblr.png" ></a></li>
    	<li><a href="x"><img src="img/instagram.png" ></a></li>
        <li><a href="x"> <img src="img/linkedin.png" ></a></li>
    </ul>
    </div>

【参考方案1】：

我可以看到div 向左浮动。您需要从.links 样式中删除float: left;，并将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" ></a></li>
    	<li><a href="x"><img src="img/twitter.png" ></a></li>
    	<li><a href="x"> <img src="img/tumblr.png" ></a></li>
    	<li><a href="x"><img src="img/instagram.png" ></a></li>
        <li><a href="x"> <img src="img/linkedin.png" ></a></li>
    </ul>
    </div>

【参考方案2】：

尝试将 .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" ></a></li>
        <li><a href="x"><img src="img/twitter.png" ></a></li>
        <li><a href="x"> <img src="img/tumblr.png" ></a></li>
        <li><a href="x"><img src="img/instagram.png" ></a></li>
        <li><a href="x"> <img src="img/linkedin.png" ></a></li>
    </ul>
</div>

【讨论】：

我不知道为什么，但是当我添加 "text-align: center;"它会向右浮动一点点，而不是完全在中间，但没有它也能完美工作，谢谢！

某些浏览器对<ul> 元素有默认样式，这些样式会在元素左侧添加间距。在 Chrome 中，这称为-webkit-padding-start。在 Mozilla 中，它被称为 -moz-padding-start。我不确定 IE 或 Edge。默认情况下，Chrome 的值为 40px。您应该能够将此元素的该值覆盖为 0 或任何必要的值。谢谢！