html - 居中对齐 html 页面中的固定顶部菜单

Question

我正在开发一个简单的网页，在该网页上使用div标签中的菜单栏。当我不固定div标签时，可以使用以下方法在中心对齐：

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

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

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

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

请帮忙

score 2 · Accepted Answer

将此添加到您的 CSS 中：

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

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

score 0 · Accepted Answer

试着放进margin:0 auto;去.top .overlay {}

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

score 0 · Accepted Answer

0

为您解决方案：设置width为 100%

.top .overlay{ ...位置：固定；宽度：100%；... }

于 2012-09-04T19:37:03.350 回答

score 0 · Accepted Answer

我在你的网站上用 firebug 尝试了这个 CSS 并且它有效：

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

只有设置了 a 时，CSS 属性的auto值margin才会起作用width。我还删除了该position属性。

score 0 · Accepted Answer

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

#container p {
    text-align: center;
}

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

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

5 回答 5