Aligning a child div centered/bottom in parent
16,447
#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%
}
Author by
Admin
Updated on June 25, 2022Comments
-
Admin almost 2 years
I'd like to align a child
div
inside a parentdiv
(header-image
as background image) centered vertical and horizontally to the bottom.<div id="header-image"> <div class="row"> ... Content </div> </div>
I found a solution for horizontal centering:
<div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%;"> ... content </div> </div>
But no idea how to get the content to the bottom (works only with
position:absolute
)For better understanding on http://webstopp.de/ you can see a
header-image
and some text in it but the text has to be on bottom of theheader-image
div
.