居中水平 UL答案

【问题标题】：Centering horizontal UL居中水平 UL
【发布时间】：2011-04-14 04:38:50
【问题描述】：

我似乎无法让我的 UL 在其 DIV 中居中。

<div id="sitenavdiv">
    <ul id="sitenav">
        <li class="about"><a href="#" title=""><img src="images/about-link.png" alt="about"></a></li>
        <li class="portfolio"><a href="#" title=""><img src="images/portfolio-link.png" alt="portfolio"></a></li>
        <li class="contact"><a href="#" title=""><img src="images/contact-link.png" alt="contact"></a></li>
    </ul>
</div>

我有以下 CSS：

#sitenavdiv {padding-top: 30px; width: 620px; position: relative; float: left; text-align:center;}

ul#sitenav {width: 231; margin: 0 auto; display: inline;}
ul#sitenav li.about{width: 64px; height: 31px; display: block; float: left; overflow: hidden;}
ul#sitenav li.about a{width: 64px; height: 31px; display: block;}
ul#sitenav li.about a:hover{width: 64px; height: 31px; display: block; margin-top:-31px;}

ul#sitenav li.portfolio{width: 88px; height: 31px; display: block; float: left; overflow: hidden}
ul#sitenav li.portfolio a{width: 88px; height: 31px; display: block;}
ul#sitenav li.portfolio a:hover{width: 88px; height: 31px; display: block; margin-top:-31px;}

ul#sitenav li.contact{width: 79px; height: 31px; display: block; float: left; overflow: hidden}
ul#sitenav li.contact a{width: 79px; height: 31px; display: block;}
ul#sitenav li.contact a:hover{width: 79px; height: 31px; display: block; margin-top:-31px;}

我确定这很简单，但我似乎无法正确组合。

【问题讨论】：

标签： html css centering

【解决方案1】：

ul#sitenav 的规则应该是：

ul#sitenav {width: 231px; margin: 0 auto; display: block; }

注意display: block; 和231px 而不是231。

（查看和编辑，添加一些额外的颜色，http://jsfiddle.net/eRRjy/）

【讨论】：

移除display:inline，但无需将其设置为block。 UL 默认是块级的。
如果没有更早的规则更改该默认值，那就是真的。如果没有 ul { display: inline; } 规则，ul#sitenav 规则可以删除 display: block; 并完成它。