ブートストラップの中央に1行

Question

ブートストラップグリッドシステムを使用している5枚の画像があります。 現在、このように表示されています。 （Xは画像であると仮定します）。 X

X X

X X

私は最後のxは、中心にあるようにすることを好きになるでしょう。

これは画像を表示する方法です。 私の結果を示すjsbin http://output.jsbin.com/rojipeqazuがあります。 私のコードの一部をコピーすると、基本的にこれを3回繰り返しています。

どうすればいいですか？

 <div class="divide10"></div> 
     <div class="row"> 

<div class="col-sm-4"> 
     <div class="caption-overlay"> 
      <figure><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt="" /> </a></figure> 
      <div class="caption bottom-right"> 
      <div class="title"> 
       <a href="#"><h3 class="main-title layer">Pepsi</h3></a> 
      </div> 
      <!--/.title --> 
      </div> 
      <!--/.caption --> 
     </div> 
</div> 


<div class="col-sm-4"> 
     <div class="caption-overlay"> 
      <figure><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt="" /> </a></figure> 
      <div class="caption bottom-right"> 
      <div class="title"> 
       <a href="#"><h3 class="main-title layer">Pepsi</h3></a> 
      </div> 
      <!--/.title --> 
      </div> 
      <!--/.caption --> 
     </div> 
</div> 

Answer 1

<div class="col-sm-8" style="text-align: center">最後の行です。ブームは終わった。 MAGICAL

「これはなんですか？」と聞く？私は列の幅を倍にし、内容を中央に揃えました。

PS：私はそれがよさそうだだから私はあなたの質問を理解している場合、これは私のためのより良い方法です...すべてcol-sm-#のにちょうどデザイナーの先端

Answer 2

をstyle="text-align: center"を追加することをお勧めします。

<table style="text-align:center;"> 
 
<tr> 
 
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td> 
 
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td> 
 
</tr> 
 
<tr> 
 
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td> 
 
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="2"><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td> 
 
</tr> 
 
</table>

Answer 3

これはあなたのためにそれを中央にする必要があります。

<span class="col-md-12"> 
<span class="col-md-6">//image here 
</span> 
<span class="col-md-6">//image here 
</span> 
<span class="col-md-6">//image here 
</span> 
<span class="col-md-6">//image here 
</span> 
<span class="col-md-offset-3 col-md-6 
col-md-offset-3">//image here 
</span> 
</span> 

これはうまくいくはずです。