223

私はブートストラップフレームワークを使用しており、画像を水平方向に中央揃えにしようとしていますが、うまくいきません..

12グリッドシステムを3つの等しいブロックに分割するなど、さまざまな手法を試しました.

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

ページに対して画像を中央に配置する最も簡単な方法は何ですか?

4

15 に答える 15

149

これを行う正しい方法は

<div class="row text-center">
  <img ...>
</div>
于 2013-03-15T15:04:05.517 に答える
127

2018年アップデート

このクラスは、 Bootstrap 4center-blockには存在しなくなりました。Bootstrap 4 で画像を中央に配置するには、...を使用します。mx-auto d-block

<img src="..." class="mx-auto d-block"/>
于 2017-04-08T12:14:02.760 に答える
84

'center-block' をクラスとしてイメージに追加 - 追加の CSS は不要

<img src="images/default.jpg" class="center-block img-responsive"/>
于 2014-01-10T22:34:24.400 に答える
53

Twitter ブートストラップには、中心となるクラスがあります: .pagination-centered

それは私のために働いた：

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

クラスのCSSは次のとおりです。

.pagination-centered {
  text-align: center;
}
于 2012-10-26T15:04:04.203 に答える
30

画像の横に他に何もないと仮定すると、最良の方法は親で使用text-align: centerすることです:img

.row .span4 {
    text-align: center;
}

編集

他の回答で述べたように、ブートストラップ CSS クラス.text-centerを親要素に追加できます。これはまったく同じことを行い、v2.3.3とv3の両方で利用できます。

于 2012-06-04T10:55:21.940 に答える
18

私のために働きます。使ってみてcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>
于 2015-03-13T08:44:01.170 に答える
6

私は同じことが必要で、ここで解決策を見つけました：

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

そしてCSSへ：

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
于 2013-06-03T06:37:44.853 に答える
1

ブートストラップ img クラスで margin プロパティを使用できます。

.name-of-class .img-responsive { margin: 0 auto; }
于 2016-02-05T21:53:09.490 に答える
0

使用する必要があります

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}
于 2014-02-21T13:58:09.320 に答える
-3

以下のように、以前のソリューションの CSS を変更できます。

.container, .row { text-align: center; }

これにより、親のすべての要素も中央に配置さdivれます。

于 2012-06-04T11:43:59.070 に答える