Bootstrap：图像上的文字叠加在左侧

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

只需将左边的CSS属性添加到您的标题div，你应该没问题。 在我的例子中，我添加了左边：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>