html - 在屏幕中央显示一个图像，高度为 77px；

Question

我设计了一个网页。顶部是带有 height:77px 的标题。在标题之后我想在屏幕中心添加一个图像，宽度为 width: 960px; 。现在我面临的问题是图像来自标题内部的顶部意味着第二个图像来自顶部而我需要在 77px 的高度之后显示；

这是 HTML..

 <div id="headerbodyimage" style="width: 960px; margin-top: 77px;  margin: 0 auto;" class="headerbody-wrapper">

 </div>

这是 CSS..

.headerbody-wrapper {
background: url("../images/banner.jpg");
height: 242px;
position: inherit;
width: 100%;
z-index: 60001; }

我试图改变位置，但它折叠了整个页面

这是我在 html 中的标题代码..

 <div class="header-wrapper">
 </div>

这是我的 CSS。

.header-wrapper {
background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 77px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 60001; }

请帮帮我。

Answer 1

在 style 属性中使用 margin: 0 auto; 可以覆盖 margin-top: 77px;。 margin: 0 auto; 是 margin-top: 0; 的简写右边距:自动； margin 底部:0；左边距:自动；。一起去:

这是一个 demo .

HTML:

<div class="header-wrapper"></div>
<div id="headerbodyimage" class="headerbody-wrapper"></div>

CSS:

.header-wrapper {    
    z-index: 60001;     
    width: 100%;
    height: 77px;
    margin: 0 auto;
    background: url("http://placehold.it/77x77") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

.headerbody-wrapper {    
    z-index: 60001; 
    background: url("http://placehold.it/960x242");
    width: 960px;
    height: 242px;    
    margin: 0 auto;
}