11

私のHTML構造は基本的にこれです -

<div id="header">
    <div class="container">
    </div>
</div>
<div id="content">
    <div class="container">
    </div>
</div>
<div id="footer">
    <div class="container">
    </div>
</div>

内側を正確に下の中央<div id="header"> に揃えたい場合を除いて、要素を無視します。次のCSSコードを使用しています-<div class="container"><div id="header">

#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }

親 (#header) と子 (#header .container) の DIV には高さの違いがあります。子から削除position:absolute;すると中央に配置されますが、下ではなく親の上にくっつきます。キープposition:absolute;すると下に固定されますが、左に揃えられます。

中央と下の両方を同時に揃えるにはどうすればよいですか?

4

9 に答える 9

5

この方法で試してください：

#header .container{ 
   width: 940px;  
   height: 262px; 
   background-color: #220000; 
   position: absolute;
   bottom: 0 ;
   left: 50%;
   margin-left: -470px; 
}
于 2013-07-01T13:22:25.703 に答える
2

これを試して

#header .container {
    width: 940px;
    height: 262px;
    background-color: #220000;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
    left: 61px;
}
于 2013-07-01T13:28:03.587 に答える
1

これを使って：

#header{ 
width:1062px; height:262px; background-color:#110000; text-align:center;  
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}  

#header .container{ 
    width:940px; 
    height:262px; 
    background-color:#999000; 
    margin:0px auto;
    bottom:0px; 
    margin-bottom: 0px;
    padding-top: 0px;
}

ここでjsfiddle

更新:
DenisVuyka がコメントで述べたように、上記のサンプルは、DIV の高さが固定されたこの特定の質問に対する回答であったことを追加する必要があります。
DIV の高さが物事を分割しないようにしたい場合は、たとえばCSSpadding-top:10%;で#headerとheight:100%を使用する必要があります。#header .container

#header{ 
width:462px; height:262px; background-color:#110000; text-align:center;  
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;  
}    

#header .container{ 
    width:300px; 
    height:100%; 
    background-color:#999000; 
    margin:0px auto;
    bottom:0px; 
    margin-bottom: 0px;
    padding-top: 0px;
}

ここにデモがあります: http://jsfiddle.net/d6ct6/。

于 2013-07-01T14:17:46.603 に答える
0

内側の div を中央に配置することにもっと関心があり、垂直方向の配置を手動で設定できる場合。

私が使用したデモ の高さは、最初の div の高さ - 2 番目の div の高さでした。

#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
于 2013-07-01T13:37:02.153 に答える
0

CSS テーブル表示プロパティを利用して、次のことを行います。

#header {
    width:1062px;
    height:326px;
    background-color:#110000;
    text-align:center;
    display: table-cell;
    vertical-align: bottom;
}
#header .container {
    width:900px;
    height:262px;
    background-color:#cccccc;
    color: white;
    display: inline-block;
  }

#headerブロックをdisplay: table-cellに設定しvertical-align: bottom、子の下端を親の下端に揃えるように設定します。

子.container要素が持っていたので、親display: inline-blockのプロパティに応答できるようになります。text-align: center

これは、子の幅に関係なく機能し.containerます。

デモ フィドル: http://jsfiddle.net/audetwebdesign/p9CxE/

于 2013-07-01T13:50:50.930 に答える
0

中間の div を追加できることに気付くまで、この同じ問題に 1 時間ほど悩まされていました。これにより、垂直方向の配置の問題がセンタリングから分離されました。

.dparent {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    position: absolute;
}
.dchild {
    border: 1px solid blue;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 100px;
    bottom: 0px;
    position: relative;
}

.dmid {
    border: 1px solid green;
    width: 100%;
    position: absolute;
    bottom: 0;
  
    <div class="dparent">
        <div class="dmid">
            <div class="dchild"></div>
        </div>
    </div>

絶対位置と 0 の下で、最初に垂直方向の位置合わせを行います。次に、margin-left と margin-right を auto に設定してセンタリングを行います。

于 2014-12-30T17:48:33.367 に答える
-2

気になる幅については、次の解決策を試すことができます。

width:100%;
position:absolute;
bottom: 5px; 
left:50%;
margin-left:-50%;

幸運を！

于 2015-02-06T17:59:08.280 に答える