3列内で画像とそのキャプションを水平に整列するには

Question

ブートストラップを使用して、それぞれ画像とキャプションを含む3つの列を作成しました。

これは私の現在のコードです：

<!-- Section 6 --> 
<div class="cssSection cssCenter"> 
    <div class="container"> 
     <h2>The Order</h2> 
     <br> 
     <p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p> 
     <br> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <img class="img-center img-responsive" src="http://placehold.it/400x275"> 
       <br> 
        <p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p> 
      </div> 
      <div class="col-sm-4"> 
       <img class="img-center img-responsive" src="http://placehold.it/400x275"> 
       <br> 
        <p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p> 
      </div> 
      <div class="col-sm-4"> 
       <img class="img-center img-responsive" src="http://placehold.it/400x275"> 
       <br> 
        <p>The Templars refrained from becoming drunk, gambling and swearing</p> 
      </div> 
     </div> 
    </div> 
</div> 

そしてここにはある

は、しかし、私はそれがこのようなコンテンツ、実際に出力したい：そうのように関連するCSSコード：

.cssSection { 
    padding: 45px 0 30px; 
} 

.cssCenter { 
    text-align: center; 
} 

.cssInformation { 
    font-size: 18px; 
} 

イメージに影響を与えずにpタグを水平に整列させるには、HTMLまたはCSS内でどのような調整ができますか？高度な

Answer 1

で

おかげで、あなたが追加した可能性がある他のCSSはありませんか？私はjsfiddle（ブートストラップを追加）であなたのコードを試してみて、それは私のためにうまく表示されます。

Answer 2

ここではすべてがプランナーに問題ありません。問題を点検するために、HTMLファイル全体を提供してください。

Answer 3

あなたのコードはbootstrap3.3.4でうまくいきます。 ブートストラップのバージョンを確認してください。