對齊頁面中心的圖像和覆蓋文本

Question

我正在嘗試將圖像與頁面中間的一些文本對齊。圖像正確地到達中心，但疊加文字偏離中心。以下是代碼。文本應該位於圖像的左上角。

<div class="w3-content"> 
<div class="w3-row-padding" style="text-align: center;"> 
    <div class="w3-display-container"> 
     <img src="w3images/house5.jpg" alt="House" style="width:50%;" class="animated fadeInRight slower"> 
     <div class="w3-display-topleft w3-black w3-padding animated fadeInRight slower">Summer House</div> 
    </div> 
</div> 
</div> 

Answer 1

如果你需要文字在圖像的頂部，我認爲你應該使用圖像作爲背景圖像，或使用絕對位置。

.image-wrap { 
    position: relative; 
    margin: 0 auto; 
    width: 50%; 
} 
.image-wrap .text { 
    position: absolute; 
    top: 0; 
} 

https://jsfiddle.net/jymqj51r/

Answer 2

做了一些改變，並得到這個工作..感謝所有

<div class="w3-container animated fadeInRight slower w3-white " style="float: right;"> 
<div class="w3-display-container" > 
<div><img src="w3images/house2.jpg" ></div> 
<div class="w3-display-topleft w3-black w3-padding">My Summer House</div> 
</div> 
</div>