html - 图像底部的 float 文本

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。

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