2013-06-06 20 views
6

親の内側にdivの子を揃えたいと思っています。div(背景画像としてheader-image)を縦に、横を下にして整列します。 http://webstopp.de/することができます上でより良く理解するために親に子divの中央/下を揃える

を(のみposition:absoluteで動作します)

<div style="position: absolute; left: 50%;"> 
    <div style="position: relative; left: -50%;"> 
     ... content 
    </div> 
</div> 

しかし、どのように下にコンテンツを取得するには、noアイデア:

<div id="header-image"> 
    <div class="row"> 
     ... Content 
    </div> 
</div> 

私は水平センタリングのための解決策を見つけましたheader-imageとその中にいくつかのテキストがありますが、テキストはheader-imagedivの下にある必要があります。

+0

はjsfiddleはあなたがやろうとしている正確に何を表示するようにします。また、CSSの「背景」プロパティを使用するだけで検討しましたか? – ProfileTwist

+1

はjsfiddleを作った - http://jsfiddle.net/7CDzq/3/ – toddiHH

答えて

9
#header-image { 
    background: url("http://placehold.it/200x200&text=[banner img]") no-repeat; 
    height: 200px; 
    width: 200px; 
    position: relative; 
    left: 0; 
    bottom:0; 
} 
.row { 
    position: absolute; 
    left: 50%; 
    bottom:0; 
} 
.inner { 
    position: relative; 
    left: -50% 
} 

Fiddle

+0

Hm、ここでそれを試してみてくださいhttp://jsfiddle.net/toddihh/7CDzq/コンテンツはヘッダー画像の下部にありません。 – toddiHH

+0

@toddiHH:あなたの要件を誤解しました。更新された答えを確認してください –

+0

OK。下部が.rowになっていますが、#header-imageは50%左に移動します。 #ヘッダ画像のオーバーレイとして.rowが必要です。 http://webstopp.de/を参照してください。何か案が? – toddiHH

-4

あなたの子のdivのためにこれを試してみてください:margin-top: 99%;

関連する問題