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图像是一个非常长的标题，如1800px），并且始终将div的中心（因此bg-image的中心）与中心对齐窗户。

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

尝试了各种各样的事情......是否与亲子关系有关？喜欢标题只是没有被视为div，或至少需要显示：块;或者其他的东西？任何帮助表示感谢。

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。它默认仍然是块级元素。

css vertical-align overflow header

1 个答案: