ブートストラップ：画像にテキストオーバーレイが貼り付けられています

Question

私はむしろこれに新しいですが、私は画像をブラックボックス（私が望んでいた方法）に囲まれた画像にキャプチャすることができました。 70％幅で）テキストが画像の左側に接着されているように見える。

 <div class="row"> 
        <div class="text-center" style="position: relative"> 
         <img src="http://i.imgur.com/84AfU5A.jpg" alt="" class="img-responsive center-block" style="border-radius: 25px; "> 
          <div class="caption" style="position: absolute; top: 55%; width:70%; background-color: black; opacity: 0.5"> 
         <p style="color: white !important; opacity: 1 !important">“Text Text Text Text</p> 
       </div> 
     </div> 
</div> 

これは本当に明白な修正です。

Answer 1

キャプションdivに左のCSSプロパティを追加するだけで問題ありません。 私の例では、左に5％を追加しました。

<div class="row"> 
 
    <div class="text-center" style="position: relative"> 
 
    <img src="http://i.imgur.com/84AfU5A.jpg" alt="" class="img-responsive center-block" style="border-radius: 25px; "> 
 
    <div class="caption" style="position: absolute; top: 55%; left:5%; width:70%; background-color: black; opacity: 0.5"> 
 
     <p style="color: white !important; opacity: 1 !important">“Text Text Text Text</p> 
 
    </div> 
 
    </div> 
 
</div>