テキストアライメントが機能せず、センタリングテキストの代わりに私が望むように見えない

Question

私はブートストラップでグリッドシステムで作業する必要があります（私はあまり使用しません）。 しかし、それにテキストを追加すると、私はそれが動作するように動作しません。

これは完全な列のコードです：私は別荘-情報内のテキストを使用

<div id="villas"> 
    <div class="villas-inner"> 
     <div class="villa-main-text"> 
      <strong>The</strong> Villa's 
     </div> 
     <div class="villa-boxes"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <div class="villa-box"> 
         <div class="more-info-villa"> 
          <div class="arrow"> 
           <i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i> 
          </div> 
         </div> 
         <img src="assets/img/villa1.png" alt="Villa 1"> 
         <div class="villa-info"> 
          <strong>Villa test</strong><br> 
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ante tempor, pulvinar metus ut, euismod velit. Fusce a ligula.</span> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <div class="villa-box"> 
         <div class="more-info-villa"> 
          <div class="arrow"> 
           <i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i> 
          </div> 
         </div> 
         <img src="assets/img/villa1.png" alt="Villa 1"> 
         <div class="villa-info"> 
          <strong>Villa test</strong><br> 
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ante tempor, pulvinar metus ut, euismod velit. Fusce a ligula.</span> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <div class="villa-box"> 
         <div class="more-info-villa"> 
          <div class="arrow"> 
           <i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i> 
          </div> 
         </div> 
         <img src="assets/img/villa1.png" alt="Villa 1"> 
         <div class="villa-info"> 
          <strong>Villa test</strong><br> 
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ante tempor, pulvinar metus ut, euismod velit. Fusce a ligula.</span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

とCSS：

position: absolute; 
margin: 0; 
padding-top: 25px; 
left: 50%; 
margin-right: -50%; 
transform: translate(-50%, -50%); 

私はテキスト整列を使用します。センター;すべてのものの代わりに、それはちょうど私のテキストを左に揃えます。

そして、それが作成される結果は次のとおりです。誰かが、私はこの問題を解決する方法を

知っていますか？それは長い間悩まされています、グリッドシステムや何かと関係がありますか？

ありがとうございます。

Answer 1

は、CSSで

.image{ 
border:2px solid red; 
width: 50%; 
} 

を、それを使用してhtmlコードは

<div class="image"> 
    <img src="img_1212.jpg" alt="" width="304" height="228"> 
    <figcaption>Fig.1 - A view of the pulpit rock in NorwayA view of the pulpit rock in Norway.</figcaption> 
</div>