イメージをイメージの中央に配置します。

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>