我想将父级 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-image
div
的底部。
最佳答案
#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%
}
关于css - 将子 div 在父级中居中/底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16967823/