将水平CSS菜单居中(Center a horizontal CSS menu)

将水平CSS菜单居中(Center a horizontal CSS menu)

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

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

我尝试在<nav> <div>外使用另一个<div>并设置边距，但它只是一直左对齐。

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： http ： //jsfiddle.net/njuVm/

I have a CSS menu using the following CSS.

What is the best way to center the whole menu on the page?

I have tried using another <div> outside <nav> and setting margins but its just aligning left all the time.

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 : http://jsfiddle.net/njuVm/

最满意答案

您可以使用以下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;
    margin: 0;                 /* << add this */
    padding: 0;                /* << add this */
    display: inline-block;     /* << add this */
    vertical-align: top;       /* << add this */
}

nav ul li {
    float: left;
    margin: 0;          /* << add this */
    padding: 0;         /* << add this */
}

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

nav ul li a {
    display: block; 
    padding: 10px 15px;
    color: #000000;
    text-decoration: none;
    background-color: pink; /* optional... */
}       

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;
}
 
 请参阅演示： http ： //jsfiddle.net/audetwebdesign/DP6Ax/ 
 
 关键是设置display: inline-block for nav ul ，这将允许你的text-align: center规则生效。 
 
 确保将ul和li元素上的边距和填充清零。 你所做的其他事情或多或少是正确的，所以你应该做得很好。 
You can center the navigation bar by using the following CSS rules:
 
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;
    margin: 0;                 /* << add this */
    padding: 0;                /* << add this */
    display: inline-block;     /* << add this */
    vertical-align: top;       /* << add this */
}

nav ul li {
    float: left;
    margin: 0;          /* << add this */
    padding: 0;         /* << add this */
}

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

nav ul li a {
    display: block; 
    padding: 10px 15px;
    color: #000000;
    text-decoration: none;
    background-color: pink; /* optional... */
}       

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;
}
 
See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/
 
The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.
 
Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.