在页面中居中导航列表

Question

我已经尝试了所有内容，但它并没有将列表集中在页面上。这是css：

#lowermenu2 {
    width: 100%;
}

#lowermenu2 ul {
    list-style-type: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
}

#lowermenu2 a {
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #003E79;
    font-family: "Adobe Garamond Pro";
    font-weight: bolder;
    font-size: 1.3em;
    height: 44px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 7px;
    font-style: italic;
    line-height: 90%;
}

#lowermenu2 li {
    float: left;
    width: 30%;
    max-width: 230px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
}

您可以在http://granthoneymoon.com/temp2.html看到该页面（这是空白广告下面的下方菜单，而不是顶部导航菜单）

更新：我摆脱了浮动：左边和更改块到内联：块。我还将lowermenu2更改为position：relative并使左右边距“自动”并且它仍然不居中。 （这是LOWER菜单，我说的不是mainnav）

Answer 1

原因是因为“浮动：左;”在li标签上。 Float通常用于将内容向左或向右定位。因此，你无法集中它。所以你要找的属性是“display：inline-block;”

#lowermenu2 ul {
    list-style-type: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    text-align: center;
}
#lowermenu2 li {
    display: inline-block;
    padding-left: 10px;
    width: 25%;
}

Answer 2

将text-align: center添加到您的UL元素，然后从列表元素中删除float:left并将其设置为display: inline-block。

#lowermenu2 ul {
    /*your existing styles*/
    text-align:center;
}
#lowermenu2 ul li{
    /*your existing styles minus float left*/
    display:inline-block;
}

结果如下：

Answer 3

如果您试图将实际的＆＃34;导航栏＆＃34;而不只是导航＆＃34;链接＆＃34;

然后你需要编辑两件事：

BODY

body {
position:relative;
margin:0 auto;
width:1000px; <!-- Or Whatever you want it be -->
}  

目前你的身体设置为100％，很好，现在只需添加我上面的位置和边距属性......这将使你的页面居中。

导航栏

现在为Nav Bar

#mainnav{
position:relative;
margin:0 auto;
width: 100%;
}

这会导致导航栏在页面中间居中