0

好的，所以我在页面中有一个部分（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      |   |
|___|_____________________________________|___|
    |                                     |
    |_____________________________________|

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

4

1 回答 1

2

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

这是简写​​：

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

要回答您的其他问题：不，该<header>元素的呈现方式与普通<div>元素没有什么不同，除了某些浏览器不支持它。默认情况下它仍然是块级元素。

于 2012-11-05T08:10:56.397 回答