2013-06-06 21 views
6

Chciałbym ustawić dziecko div wewnątrz obiektu macierzystego div (header-image jako obraz tła) wyśrodkowane w pionie i poziomie w dół.Wyrównanie elementu div div/dolnej w obiekcie macierzystym

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

Znalazłem rozwiązanie dla poziomego centrowania:

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

ale nie ma pojęcia, jak zdobyć zawartości do dołu (działa tylko z position:absolute)

Dla lepszego zrozumienia na http://webstopp.de/ możesz zobacz header-image i trochę tekstu, ale tekst musi znajdować się na dole header-image .

+0

dokonać jsfiddle pokazać dokładnie to, co próbujesz zrobić. Zastanawialiście się też, czy po prostu użyć właściwości CSS "background"? – ProfileTwist

+1

zrobiłem jsfiddle - zobacz http://jsfiddle.net/7CDzq/3/ – toddiHH

Odpowiedz

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, wypróbowałem tutaj http://jsfiddle.net/toddihh/7CDzq/, ale zawartość nie znajduje się na dole nagłówka-obrazu. – toddiHH

+0

@toddiHH: cóż, źle zrozumiałem twoje wymagania. Sprawdź zaktualizowaną odpowiedź –

+0

OK .row jest teraz na dole, ale obraz nagłówka # przesuwa się o 50% w lewo. Potrzebuję .row jako nakładki na # nagłówek-obraz. Zobacz także na stronie http://webstopp.de/. Dowolny pomysł? – toddiHH

-4

Wypróbuj za div dzieci: margin-top: 99%;

Powiązane problemy