-4 
<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;

}

ページの上部にヘッダーを固定する必要があります（ラッパーは固定幅です）。ラッパー内の画像は、ヘッダーの水平方向と垂直方向の両方の中央に配置されます。それを達成する方法は？

OK 明確にするために、ラッパーは固定幅です。ヘッダーはページの上部 (ラッパーの内側) に貼り付け、2 つの写真/画像を含める必要があります。画像は互いに重なり合い、ヘッダー内で垂直方向と水平方向の両方で中央に配置する必要があります。私が今十分に正確であることを願っています。

4

1 に答える 1

0

どうでしょうか: [テストされていない疑似コードを簡単に]

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>
于 2013-01-27T01:05:52.547 に答える