css 垂直对齐溢出标头

Question

好的，所以我在页面中有一个部分（wordpress）

<header id="masthead" role="banner">
    <div id="header_fix"></div>
</header>

和css

#masthead {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-repeat:no-repeat;
    background-size:cover;
    padding: 70px 0;
} 
#header_fix {
    margin: 0 auto;
    width: 1355px;
    height: 164px;  
    text-align: center;
    background-image:url(images/Banner_SF.png);
    /*background-size: contain;*/
}

我想让 header_fix div 溢出父标题（head_fix fiv 图像是一个非常长的横幅，如 1800 像素），并且始终将 div 的中心（因此 bg-image 的中心）与中心对齐窗口。

    ______________________________________
    |    masthead always window width     |
____|_____________________________________|___
|   |     header_fix always centered      |   |
|___|_____________________________________|___|
    |                                     |
    |_____________________________________|

尝试了各种各样的东西......是不是和亲子关系有关？ like 是 header 只是不被视为 div，或者至少需要 display:block;或者其他的东西？任何帮助表示赞赏。

Answer 1

您不需要额外的元素。您可以使用background-position 将背景图像居中。它已经与源图像的大小相同。

这里是简写：

#masthead {
    width: 100%;
    margin: auto;
    background: url(images/Banner_SF.png) no-repeat center top;
}

回答您的其他问题：否，<header> 元素的呈现方式与普通的 <div> 元素没有区别，除了 not being supported in some browsers。默认还是块级元素。