Question

我有一个使用两个div容器创建的标头，一个#header-container和一个#header：

#header_container { 
background:#eeeeee; 
border:0px hidden; 
height:100px; 
position:fixed; 
width:1000px; 
top:0; 
margin: auto; 
display: block;
}
#header { 
line-height:60px; 
margin:0 auto; 
display:block; 
width:940px; 
text-align:center;
}

我当然无法同时拥有“固定”和“中心”，那么如何在保持“固定”属性的同时将标题居中？

谢谢！

Answer 1

如果添加“left：50％; margin-left：-500px;”到＃header-container，它会居中。不要忘记将边距放在边距后面：auto;

所以你的代码将是：

#header_container{
background: #eeeeee;
border: 0px hidden; 
height: 100px;
position: fixed;
width: 1000px;
top:0;
left: 50%;
margin-left: -500px;
display:block;
}

#header{
line-height: 60px;
margin: 0 auto;
display: block;
width: 940px;
text-align:center;
}

Answer 2

这是一个小提琴：

http://jsfiddle.net/AJLZT/8/

只需使用

#header {    margin: 0 30px;}

Answer 3

这应该可以将固定位置的div水平居中，其宽度不是100％：

position:fixed;
background-color:grey;  /* optional */
height:100px;           /* optional but useful for most of you, choose value you want*/
width:1280px;           /* optional but useful for most of you, choose value you want*/
top:0px;                /* optional but useful for most of you, choose value you want*/
margin-left:auto;
margin-right:auto;
left:0;
right:0;

此处有更多信息：http://www.w3schools.com/cssref/pr_pos_left.asp

Answer 4

这可能会有所帮助。您只需在代码中添加margin-left标记

#header_container{
width:1000px;
height:200px;
margin:10px;
background:orange;
position:fixed;
margin-left:350px;
}
#header { 
line-height:60px; 
margin:0 auto; 
display:block; 
width:940px; 
text-align:center;
}

Answer 5

这是一次性解决此问题的方法。

您在这里：

首先，将引导程序添加到“ html”

中的“ head” 中

然后在标题中添加类“容器流体”

然后在样式部分中，输入：

header {
  position:fixed;
  top:0;
  left:0;
  right:0;
}
//boom!!! problem solved.

CSS：任何方式水平居中一个“position：fixed”的标题？

5 个答案: