Question

我正在尝试将水平菜单居中（水平）到页面中间，但没有成功。我把菜单放在左边和右边设置为自动边距的容器中，但这不起作用。谢谢你的帮助 http://jsfiddle.net/nB6x4/

/***** MENU *******/
.menu-container {
    position: absolute;
    top: 20px;
    margin-right: auto;
    margin-left: auto;
  width: 100%;

}

nav {
    float: right;
    margin: 20px auto;
    width: 100%;
}
nav ul {
    margin-right: -4px;
    margin-left: 5px;
    }
nav ul li {
    display: inline-block;
    margin-right: -4px;
    margin-left: 5px;
vertical align: top;
}
nav a {
    padding: 7px 10px;
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0);
    border-radius: 5px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;
}
nav a:hover {
    background: rgba(0,0,0,0.25)
}
.activeNav {
    background: rgba(0,0,0,0.25)
}
nav ul li ul {
    position: absolute;
    display: block;
    margin-top: 5px;
    border-radius: 5px;
    border-top-left-radius: 0;
    background: none;
    padding-top: 5px
}
nav ul li ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0
}
nav ul li ul li a {
    display: block;
    text-align: left;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px rgba(0,0,0,0.33);
    padding: 10px
}
nav ul li ul li a:hover {
    background: rgba(20,150,220,0.5);
    color: white;
    text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
    display: block;
}
.hover span {
    color: rgba(255,255,255,0.9);
    background: rgba(20,150,220,0.5);
    border-radius: 5px;
    position: absolute;
    display: block;
    margin: 5px 0 0 -57px;
    padding: 10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
}



/**** END MENU ****/

Answer 1

试试这个实际上你需要使位置相对并最初给它一些宽度

.menu-container {
position: relative;
top: 20px;
margin: o auto;
max-width: 800px;
}

希望这有帮助，否则请尝试使用你的HTML

Answer 2

您需要指定width才能使margin: 0 auto;正常工作。

http://jsfiddle.net/nB6x4/3/

更新了CSS：

nav {
    margin: 20px auto;
    width: 624px;
}

或者，您可以使用text-align: center;和display: inline-block;来完成此操作，其中包含宽度未知的内容：

http://jsfiddle.net/nB6x4/4/

nav {
    margin: 20px 0;
    text-align: center;
}
nav ul {
    padding: 0;
    margin-right: -4px;
    margin-left: 5px;
    display: inline-block;
}

Answer 3

nav 
{
    float: right;
    margin: 20px auto;
    width: 100%;
    text-align: center;
}

您可以简单地将文字对齐中心添加到导航

Here is the Fiddle 它没有响应，因为你没有提供响应代码

Answer 4

您需要重新评估一些事项。

首先，绝对定位的容器不能以边距为中心，因为边距：0自动;只影响相对定位的元素。

所以你需要做的第一件事是删除位置：绝对;在.menu_container。

.menu-container {
    top: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

然后，在div相对定位的情况下，将属性宽度设置为100％。这使得div占用了它可以从它的父元素中获得的全部宽度。添加保证金：0自动;没有做任何事情，元素的左右两侧已经触及父母的两侧。你不能把“完美契合”的东西放在中心位置。可以说是它的父母。

所以你可以做一些事情。您可以缩小容器的大小，比如缩小到80％，然后它将开始使容器元素居中，但不一定以导航链接为中心。

我认为更好的选择是使用text-align：center;因为他们使用display：inline-block而使LI居中。它们保留了它们的块特征，但也被视为正常文本＆＃34;可以这么说。

只需将选择器更改为我所拥有的，就应该只需要......

nav ul {
    text-align: center;
    margin-right: -4px;
    margin-left: 5px;
    }

JS Fiddle Demo

问题是水平居中菜单

4 个答案: