2013-06-06 3 views
6

Я хотел бы выровнять ребенка div внутри родителя div (header-image в качестве фонового изображения), центрированный по вертикали и по горизонтали на дно.Выравнивание дочернего div с центром в центре

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

Я нашел решение для горизонтального центрирования:

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

Но не знаю, как получить содержимое до дна (работает только с position:absolute)

Для лучшего понимания на http://webstopp.de/ вы можете см. header-image и некоторый текст в нем, но текст должен быть внизу header-imagediv.

+0

сделать jsfiddle, чтобы показать, что именно вы пытаетесь сделать. Кроме того, вы считали, что просто используете свойство CSS background? – 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

Хм, попробовал это здесь http://jsfiddle.net/toddihh/7CDzq/, но контент не находится внизу снизу. – toddiHH

+0

@toddiHH: Хорошо, я неправильно понял ваше требование. Проверить обновленный ответ –

+0

ОК. Теперь он находится внизу, но # header-image перемещается на 50% влево. Мне нужно .row как наложение над # header-image. См. Также http://webstopp.de/. Есть идеи? – toddiHH

-4

Попробуйте это для вашего ребенка DIV: margin-top: 99%;

Смежные вопросы