Question

hello stackoverflow社区，

我的固定标题有问题。我的html结构看起来像这样：

<div id="site_wrapper">
<div id="site_header">Header</div>
</div>

CSS看起来像这样：

div#site_wrapper {
max-width:1500px; min-width:900px;
}

div#site_header {
            position:fixed; left:50%; top:0px; z-index:10;
            height:160px; width:1500px;
            margin-left:-750px;
            background-color:#fff;
}

我的问题是，我需要将标题居中并使用宽度1500固定...

一些想法？

Answer 1

要使用固定标头，只需使用以下代码：

div#site_header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
  height: 160px;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 0;
}

Answer 2

由于#site_header在site_wrapper中，你需要居中#site_wrapper div，我还更新#site_wrapper代码，使其始终位于#site_wrapper中心

        div#site_wrapper {
        margin-right: auto;
        margin-left:auto;
        max-width:1500px; min-width:900px;

}

        div#site_header {
        position: fixed;
        top:0px;
        z-index:10;
        height:160px; width:1500px;
        margin-left:auto;
        margin-right:auto;
        background-color:#fff;

}

Answer 3

如果您想要固定标题，居中对齐和一些特殊宽度，请尝试使用以下内容更新CSS代码：

div#site_wrapper {
    max-width:1500px;
    min-width:900px;
    margin: 0 auto;
}
div#site_header {
    position:fixed;
    z-index:10;
    height:160px;
    width:1500px;
    background-color:#ffff00;
}

请参阅此小提琴： http://jsfiddle.net/aasthatuteja/B2Tnj/

希望这有帮助！

修复了具有特殊宽度的css标头

3 个答案: