css - CSS：有什么方法可以将具有“位置：固定”的标题水平居中？

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

这应该可以将具有固定位置的 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 2

如果添加“left: 50%;margin-left: -500px;” 到#header-container，它将居中。不要忘记将 margin-left 放在 margin: 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 3

这是一个小提琴：

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

只需使用

#header {    margin: 0 30px;}

Answer 4

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

干得好：

首先，在“html”的“head”中添加bootstrap

然后在标题中，添加类“container-fluid”

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

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

Answer 5

这可能会有所帮助。您只需要在代码中添加 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;
}