Question

我有以下带有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>

Answer 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;
}

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

CSS：中心对齐

5 个答案: