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%
}

Fiddle

Share:
16,447
Admin
Author by

Admin

Updated on June 25, 2022

Comments

  • Admin
    Admin almost 2 years

    I'd like to align a child div inside a parent div (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 the header-image div.