CSS：居中对齐答案

【问题标题】：CSS: Center AlignCSS：居中对齐
【发布时间】：2012-03-21 06:40:59
【问题描述】：

我有以下带有float:left; 的 CSS 菜单，我该如何制作这个中心。在哪里添加margin:0 auto？

CSS：

/* === 7. Navigation === */

#nav{
    width:100%;
    margin:30px auto;
}

.ie7 #nav{
    padding:10px 0 0 30px;
}

#nav ul li{
    margin:0 auto;
}

#nav li{
    float:left;
    text-align:center;
    list-style:none;
    font-weight:bold;
}
#nav li a{
    margin-right:30px;
    text-decoration:none;
    color:#5d5e5d;
}

#nav li a:hover{
    text-decoration:underline;

}

#nav li a:active{
    font-family:inherit;
    font-size:inherit;
    color:#fff;
}

HTML：

  <ul id="nav"><!--Navigation-->
                    <li id="homenav"><a href="#home">Home</a></li>
                    <li id="portfolionav"><a href="#portfolio">Portfolio</a></li>
                    <li id="contactnav"><a href="#contact">Contact</a></li>
   </ul>

【问题讨论】：

标签： css menu alignment

【解决方案1】：

如果您没有指定宽度来使菜单居中，您只需将列表项声明为 display:inline-block 而不是 float:left 并将 text-align 属性设置为居中，如下所示：

CSS

#nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
    list-style:none;
    font-weight:bold;
}

#nav {
    text-align:center;
}

这样，无论宽度如何，您的菜单都会居中。

【讨论】：

【解决方案2】：

将您的#nav 的显示属性添加为左右自动的表格和边距。

#nav{
    display:table;
    margin-left:auto;
    margin-right:auto;
 }

【讨论】：

display: table; 在旧版本的 IE 中会失败。而且margin-left:auto; margin-right:auto;和OP的简写margin: 30px auto;差别不大

【解决方案3】：

首先，您的#nav 元素的宽度必须小于 100%。然后添加“margin:0 auto”，它应该居中。

【讨论】：

#nav 元素实际上需要固定宽度才能使其正常工作。
对，我就是这个意思。将 width:100% 更改为 width:500px 或任何适合您的情况。

【解决方案4】：

看看this的文章。当我遇到居中问题时，它对我有用。它还可以跨浏览器兼容。

【讨论】：

【解决方案5】：

在#nav {...}; 内。请注意，您的导航需要固定宽度才能使其正常工作。

【讨论】：