在html页面中居中对齐固定的顶级菜单

Question

我正在开发一个简单的网页，我在div标记中使用菜单栏。当我没有修复div标记时，可以使用以下方式在中心对齐：

.top .overlay{
 background-image:none;
 text-align:center;
}

但是当我使用position: fixed;时，菜单的对齐方式不起作用

.top .overlay{
 background-image:none;
 position:fixed;
 text-align:center;
}

如果我使用固定边距，它会工作，但问题是行为会根据屏幕分辨率而改变。

请帮助

Answer 1

将此添加到您的CSS：

.top .overlay {
    width: 100%;
    text-align: center;
}

不要忘记删除margin-left: 18%;部分。

Answer 2

尝试将margin:0 auto;放入.top .overlay {}

  .top .overlay{
background-image:none;
position:fixed;
text-align:center;
margin:0 auto;
}

Answer 3

为您解决方案：将width设置为100％

.top .overlay {   ...   位置是：固定;   宽度：100％;   ... }

Answer 4

我在你的网站上用firebug尝试了这个CSS，它起作用了：

.top .overlay {
    background-image: none;
    margin: 0 auto;
    width: 830px;
}

auto CSS属性的margin值仅在设置了width时才有效。 我还删除了position属性。

Answer 5

#container {
    position :fixed;
    margin: auto;
    top:0%;
    width: *AS_REQUIRED* px;
}

#container p {
    text-align: center;
}

如上所示，我创建了两个部门：

1. 用于定位菜单及其设计
2. 对于菜单中的文字

注意 ：当您在<p> </p>标记内写入文字时，文字将对齐居中