圖像底部的浮動文字

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>

Answer 2

變化h2這樣：

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

我的建議是使用div元素與ID或類來實現這一目標。 E.g <div class="imgTextFooter" ></div>這裏應用所需:)風格

忘了補充一點，你必須添加position:relative到.review-head

fiddle

Answer 3

添加

position: relative; 

父DIV。

添加

position: absolute; 
bottom: 0; 

至H2。