图像底部的浮动文本

Question

I'm trying to create something like this: But I just can't get it right. Here is what I have so far: jsfiddle .
HTML:

<div class="review">
    <div class="review-head">
        <h2> Batman Arkham Knight Review </h2>
    </div>
</div>

CSS:

.review-head {
    height: 20em;
    background: url(http://www.flickeringmyth.com/wp-content/uploads/2014/03/Arkham-Knight2.jpg) no-repeat center center;
    background-size: cover;
}
h2 {
    color: white;
    vertical-align: center;
}

What am I missing here?
If it matters or not, I'm trying to put the image inside a Bootstrap panel. Thanks for help!

Answer 1

Give your review-head element a position . This will allow you to position the h2 within it.

 .review-head { height: 20em; background: url(http://www.flickeringmyth.com/wp-content/uploads/2014/03/Arkham-Knight2.jpg) no-repeat center center; background-size: cover; position: relative; } h2 { color: white; vertical-align: center; position: absolute; bottom: 20px; left: 20px; } 

 <div class="review"> <div class="review-head"> <h2> Batman Arkham Knight Review </h2> </div> </div> 

Answer 2

Change h2 to this:

h2 {
    color: white;
    position:absolute;
    bottom: 0px;
}

My suggestion is to use a div element with id or class to achieve that. Eg <div class="imgTextFooter" ></div> and apply here the style you want :)

Forgot to add that you have to add position:relative to .review-head

fiddle

Answer 3

Add

position: relative;

to the parent div.

Add

position: absolute; 
bottom: 0;

to the h2.