在图像底部浮动文本

Question

我试图创建这样的东西： 但我无法做到正确。以下是我到目前为止：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;
}

我在这里缺少什么？
如果重要或不重要，我试图将图像放入Bootstrap面板。 谢谢你的帮助！

Answer 1

将review-head元素设为position。这样您就可以将h2置于其中。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将h2更改为：

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

我的建议是使用带有id或class的div元素来实现这一目标。 E.g <div class="imgTextFooter" ></div>并在此处应用您想要的风格：）

忘记添加您必须将position:relative添加到.review-head

fiddle

Answer 3

添加

position: relative;

到父div。

添加

position: absolute; 
bottom: 0;

到h2。