5

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

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

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

4

5 に答える 5

18

Twitter のブートストラップ サムネイルは、デフォルトで左にフロートされます。独自のスタイルシートでその動作を上書きして、コンテナーをtext-align:centerおよびdisplay:inline-blockプロパティで中央揃えにする必要があります。これを試して：

CSS

.thumbnails {
    text-align:center;
}

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

このようにして、サムネイル画像は.thumbnailsコンテナー内の中央に配置されます。.thumbnailクラスを、画像を中央に配置するコンテナーに置き換えます。

于 2012-04-11T12:50:05.697 に答える
5

使用text-align: center;して与えると、img display: inline-block;中央揃えになるはずです。

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

于 2012-04-11T10:37:45.077 に答える
1

これは簡単です：

<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>

これが役に立ったことを願っています

于 2016-05-17T06:57:27.547 に答える
0

これはBootstrapで最も簡単に機能することがわかりました。

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

「float」を「left」から「right」に変更しただけです

于 2012-05-03T22:12:46.767 に答える
0

画像の新しい行を作成します。画像のサイズに応じて適切なオフセットを使用してください。

<div class="span8 offset2" >
于 2012-06-14T05:38:54.630 に答える