将子元素div居中/底部对齐于父元素

Question

我希望将子 div 垂直和水平居中对齐到父 div (header-image 作为背景图像) 的底部。

<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的底部。

- toddiHH

---

制作一个JSFiddle以准确展示你想要做的事情。另外，你考虑过只使用CSS的“background”属性吗？ - ProfileTwist

制作了一个 JSFiddle - 请查看 http://jsfiddle.net/7CDzq/3/。 - toddiHH

Answer 1

#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

- Khanh TO

---

嗯，在这里尝试了一下http://jsfiddle.net/toddihh/7CDzq/，但内容不在标题图像底部。 - toddiHH

@toddiHH：嗯，我误解了您的要求。请查看已更新的答案。 - Khanh TO

好的，.row现在在底部了，但是#header-image向左移动了50%。我需要将.row作为#header-image的覆盖层。在http://webstopp.de/上也可以看到。有什么想法吗？ - toddiHH

但实际上，由于使用了position: absolute，该行无法居中对齐。在这种情况下，无法使用left:50%，left:-50%，因为header.image会向右移动。由于使用了position: absolute，margin: 0 auto也无法工作。也许我可以将一个div class="inner"放入div class="row"中（fiddle已更新）。 - toddiHH

Answer 2

尝试在您的子div中使用以下代码：margin-top: 99%;

- Gimmy