サムネイルを横方向に整列します

Question

以下は、私のHTMLでtwitter-bootstrapを使用しているコードです。出力を中央に揃えようとしていますが、画像は左揃えになっています。

<ul class="thumbnails"> 
    <li class="span5"> 
    <a href="#" class="thumbnail"><img src="img.jpg" /></a> 
    </li> 
</ul> 

簡単な解決方法はありますか？

Answer 1

Twitterのブートストラップサムネイルは、デフォルトで左に浮いている、あなたは彼らがtext-align:centerとdisplay:inline-blockプロパティとそのコンテナを中央揃えにするために、独自のスタイルシートにその動作を上書きする必要があります。サムネイルの画像が.thumbnails容器の内部中心に説明する。この方法で

CSS

.thumbnails { 
    text-align:center; 
} 

.thumbnails > li { 
    display: inline-block; 
    *display:inline; /* ie7 fix */ 
    float: none; /* this is the part that makes it work */ 
} 

：これを試してみてください。あなたがあなたのイメージを中央にしたいコンテナで.thumbnailクラスを置き換え

Answer 2

text-align: center;を使用して、imgdisplay: inline-block;を入力すると、中央揃えになります。

参照：http://jsfiddle.net/HWMZg/

Answer 3

を、私は、これはブートストラップのための最も簡単な作品が見つかりました：。私は単純に「右」

を「左」から「フロート」に変更

.thumbnails > li { 
    float: right; 
    margin-bottom: 18px; 
    margin-left: 20px; 
} 

Answer 4

イメージの新しい行を作成します。あなたの画像等のサイズに応じて適切なオフセットを使用します。

<div class="span8 offset2" > 

Answer 5

これは単純な追加されます。この便利