2013-06-06 17 views
6

Desidero allineare un figlio div all'interno di un genitore div (header-image come immagine di sfondo) centrato in verticale e orizzontalmente nella parte inferiore.Allineamento di un figlio div centrato/inferiore nel genitore

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

ho trovato una soluzione per la centratura orizzontale:

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

Ma nessuna idea di come ottenere il contenuto al fondo (funziona solo con position:absolute)

Per una migliore comprensione su http://webstopp.de/ si può vedere un header-image e del testo, ma il testo deve trovarsi in fondo allo header-imagediv.

+0

fare una jsfiddle per mostrare esattamente quello che stai cercando di fare. Inoltre, hai preso in considerazione solo l'uso della proprietà 'background' del CSS? – ProfileTwist

+1

fatto un jsfiddle - vedi http://jsfiddle.net/7CDzq/3/ – toddiHH

risposta

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, provato qui http://jsfiddle.net/toddihh/7CDzq/ ma il contenuto non si trova nella parte inferiore dell'immagine dell'intestazione. – toddiHH

+0

@toddiHH: beh, ho frainteso il tuo requisito. Controlla la risposta aggiornata –

+0

OK il .row è ora in fondo, ma l'immagine di intestazione # si sposta del 50% a sinistra. Ho bisogno del .row come overlay sopra l'immagine-header #. Vedi anche su http://webstopp.de/. Qualche idea? – toddiHH

-4

Prova questo per il vostro bambino div: margin-top: 99%;

Problemi correlati