2013-06-06 39 views
6

div numaralı alt öğeyi bir alt div (header-image arka plan resmi olarak) orta ve dikey olarak ortalamak için hizalamak istiyorum. http://webstopp.de/ yapabilirsiniz üzerinde daha iyi anlamak içinAlttaki çocuk div/alt hizalama

(sadece position:absolute ile çalışır)

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

Ama nasıl dibe içeriği almak için hiçbir fikri:

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

ben yatay merkezleme için bir çözüm bulundu header-image'a bakın ve içinde bir metin var ancak metnin header-imagediv'un altında olması gerekiyor.

+0

bir jsfiddle Yapmaya çalıştığınız tam olarak ne göstermek için yapmak. Ayrıca, sadece CSS 'arka plan' özelliğini kullanmayı düşündünüz mü? – ProfileTwist

+1

bir jsfiddle yaptı - bkz http://jsfiddle.net/7CDzq/3/ – toddiHH

cevap

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/ burada çalıştı ama içerik başlık resminin altında değil. – toddiHH

+0

@toddiHH: Gereksiniminizi yanlış anladım. Güncelleştirilen yanıtı kontrol edin –

+0

Tamam, şimdi artık altta, ancak # başlık resmi% 50 sola hareket ediyor. # Header-image üzerinde bir yığın olarak .row'a ihtiyacım var. Http://webstopp.de/ adresine de bakınız. Herhangi bir fikir? – toddiHH

-4

Çocuğunuz div için bu deneyin: margin-top: 99%;