Html 将水平CSS菜单居中

我有一个使用以下CSS的CSS菜单

将整个菜单置于页面中心的最佳方式是什么

我曾尝试在

外部使用另一个

并设置边距，但它一直在左对齐

nav {
    margin: 0 auto; 
    text-align: center;
    border:1px solid black;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
}

nav ul li:hover a {
    color: #000000;
}

nav ul li a {
    display: block; 
    padding: 10px 15px;
    color: #000000;
    text-decoration: none;
}       

nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
}

nav ul ul li a {
    color: #000000;
}

nav ul ul li a:hover {
    color: #666666;
}

nav ul ul ul {
    position: absolute;
    top:0;
}

---

jsfiddle:

首先，当浮动

ul

时，必须通过添加

clear

div来清除浮动：

HTML:

<div class="clear"></div>

.clear{
    clear:both;
}

---

为了使菜单居中，您应该指定

ul

的宽度，如示例所示，并且随机将宽度设置为

560px

：

nav ul {
    list-style: none;
    width : 560px;
    margin: 0 auto;
}

---

看一看:

---

您可以使用以下CSS规则将导航栏居中：

nav{
保证金：0自动；
文本对齐：居中；
边框：1px纯黑；
}
导航ul{
显示：无；
}
导航ul li：悬停>ul{
显示：块；
}
导航ul{
列表样式：无；
边距：0；/*而不是浮动
li
，您可以将它们显示为
内联块
s

然后，它们将相对于
ul
居中，因为
text align:center

由于默认情况下
ul
与
nav
一样宽，
li
看起来像相对于
nav
居中


nav{
文本对齐：居中；
边框：1px纯黑；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
}
导航>ul>li{
显示：内联块；
}
导航a{
显示：块；
填充：10px 15px；
颜色：#000000；
文字装饰：无；
}
导航李：悬停>ul{
显示：块；
}
导航>ul{
显示：无；
位置：绝对位置；
}
导航>保险单>保险单{
边框底部：1px实心#000000；
}
导航>ul a：悬停{
颜色：#666666；
}