position: absolute bottom: 0 not working when centering text on image

absolute, css, html, image

Solution

Try setting the top to a percentage:

.text {
    position: absolute;
    top: 25%;
    left: 0;
    color: white;
    text-align: center;
    bottom: 0;
    right: 0;
}

Problem

I'm trying to place text in the middle of an image on a page. I'd like to use this on other images on the page with different heights and widths as well. I have the image relatively positioned and the text absolutely positioned, but bottom: 0 doesn't seem to be working: ``` <div class="image"> <img src="http://lorempixel.com/300/300/"> <header class="text"> <h1>header</h1> <a href="#">button</a> </header> </div> ``` Here's the CSS: ``` .image { display: inline-block; position: relative; } .text { position: absolute; top: 0; left: 0; color: white; text-align: center; bottom: 0; right: 0; } .text h1 { text-transform: uppercase; font-family: Helvetica, Arial; font-size: 16px; letter-spacing: .5px; } .text a { font-size: 14px; border: 1px solid white; padding: 5px 30px; color: white; text-decoration: none; } ``` And a link to the fiddle: http://jsfiddle.net/yg4Ar/

Original source