Question

<div class="wrapper">
  <div class="header">
   <img id="back" />
   <img id="front" />
  </div>
  <div class="body">
   ...
  </div>
  <div class="footer">
   ...
  </div>
</div>

<style type="text/css">
.wrapper {
    margin-left: auto;
margin-right: auto;
margin-top: -8px;
width: 1024px;
height: 1500px;
background-color: #CCC;
border: 1px solid;
/*display: run-in;*/
/*position:fixed;*/
text-align: center;
}

.header {
background-color: #FFC;
/*margin: 0 auto;*/
height: 150px;
width: 1000px;
display: box;
z-index: 10;
text-align:center;
vertical-align:middle;
position: fixed;
display:block;
}

#back {
position: relative;
width: 100%;
}

#front{
position: relative;
z-index: 10;

}

我需要在页面顶部固定标题（包装器是固定宽度），包装器内部的图像在标题内水平和垂直居中。如何实现？

O.K。澄清包装是固定宽度。标题应粘贴在页面顶部（包装内）并包含两个图片/图像。图像应相互重叠，并在标题内垂直和水平居中。希望我现在足够精确。

Answer 1

怎么样：[简单地更多未经测试的psudo代码]

的CSS：

.wrapper{
 width: 960px;
 margin-left: auto;
 margin-right: auto;
}

.banding{
/*add stuff*/
}

.header{
 position: absolute;
 top: 0px;
 width: 100%;
 min-height: 150px;
 margin-top: 40%; /*this will depend on images etc*/
}

然后在html：

<div class="header banding">
       <img />
       <img />
   </div>
    <div class="wrapper">

      <div class="body">
       ...
      </div>
      <div class="footer">
       ...
      </div>
    </div>

需要建议和解决方案

1 个答案: