如何在CSS中修复我的网页标题？

Question

我正在尝试在我的网页上有一个固定的标题，即它应该始终保持可见，即使在滚动时也是如此。请注意，我的页面是固定宽度（800像素）并在屏幕上水平居中。

我尝试了什么：

<header class="noselect" style="position:fixed; top:0px; height:70px; 
                                background-color:#222D2D; margin:auto;">
  <p>
    <!-- header stuff goes here -->
  </p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>

分隔符是一条水平线，应该显示屏幕的所有宽度，请参见页脚。

问题：
 1.使用position:fixed也将其置于left = 0，而不是居中  2.分隔符不显示。

我可以通过将分隔符放在标题内来使分隔符可见，但宽度限制为800px：

<header class="noselect" style="position:fixed; top:0px; height:70px; 
                                background-color:#222D2D; margin:auto;">
  <p>
    <!-- header stuff goes here -->
  </p>
  <div class="separator clearfloat"></div>
</header>

测试页为here 我该如何解决这个问题？

Answer 1

我会将父元素定位为固定元素header与margin: 0 auto;

jsFiddle Demo

HTML：

<div id="top">
    <header>Header</header>
</div>

<main>
    <!-- Lots of content here. -->
</main>

的CSS：

#top { 
    position: fixed;
    left: 0; top: 0px; right: 0;
    z-index: 1;
    /* The below styling is here for illustrative purpose only. */
    border-bottom: 1px solid #c1c1c1;
    background: #fff;
    opacity: 0.9;
}

#top header, 
main {
    width: 500px;
    margin: 0px auto;
}

#top header {
    height: 100px;
    /* Border styling is here for illustrative purpose only. */
    border-left: 1px dashed #c1c1c1;
    border-right: 1px dashed #c1c1c1;
}

main { margin-top: 100px; /* Should be the same as '#top header' height. */ }

Answer 2

好的，一个有效的解决方案。

在<header>中用<div>包装所有内容（分隔线除外）。 要<div>添加

overflow: hidden; //optional clearfix
width: 800px;
margin: 0 auto;

此外，您还应将width: 100%;添加到<header>

Answer 3

只需将标题设置为页面的整个宽度并使其位置：固定; 然后将标题内容包装在div标签中并将其设置为width：800px;保证金：自动; 这使您的标题保持在页面顶部的固定位置。 并使用div在页面中间设置菜单/标题数据。