Bootstrapで画像を中央に配置するには？

Bootstrap'のCSSクラスだけを使って画像を中央に配置するのに苦労しています。すでにいくつかのことを試しました。1つは、BootstrapのCSSクラス mx-auto を img 要素に追加することでしたが、何の効果もありません。

よろしくお願いします。

<div class="container">
    <div class="row">
        <div class="col-4 mx-auto">
            <img class=""...> <!-- center this image within the column -->

            <form...>

            <p...>
            <p...>
            <p...>                
        </div>
    </div>
</div>
mahan
編集された質問 21日 5月 2018 в 12:45
プログラミング
twitter-bootstrap bootstrap-4
5日 4月 2017 в 9:00
1ビュー
ソリューション

デフォルトではイメージはインラインブロックとして表示されますが、.mx-autoでセンタリングするためには、ブロックとして表示する必要があります。これは組み込みの .d-block で実現できます。

<div class="container">
    <div class="row">
        <div class="col-4">

        </div>
    </div>
</div>

または、インラインブロックのままにして、.text-centerでdivで囲むこともできます。

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">

          </div>     
        </div>
    </div>
</div>

両方の方法を示す[fiddle][1]を作りました。 これらはここでも説明されています。

解説 (0)

img はインライン要素なので、コンテナに対して text-center を使用するだけです。また、mx-autoを使用すると、コンテナ(カラム)もセンタリングされます。

<div class="row">
    <div class="col-4 mx-auto text-center">

    </div>
</div>

画像だけを中央揃えにしたい場合は、d-block クラスを使用して画像を display:block にすると、mx-auto が動作します。

<div class="row">
  <div class="col-4">

  </div>
</div>

デモ: http://www.codeply.com/go/iakGGLdB8s

Zim
編集した答え 21日 5月 2018 в 11:08
解説 (0)

img を親の中央に配置する3つの方法があります。

  1. img はインライン要素ですが、text-center はインライン要素をそのコンテナの中央に整列させます。

<div class="container mt-5">
  <div class="row">
    <div class="col text-center">

    </div>
  </div>
</div>
  1. mx-auto は block 要素をセンタリングします。そのためには、d-blockクラスを用いて、imgのdisplayをinlineからblockに変更します。

<div class="container mt-5">
  <div class="row">
    <div class="col">

    </div>
  </div>
</div>

3.親には d-flex と justify-content-center を使用します。


<div class="container mt-5">
  <div class="row">
    <div class="col d-flex justify-content-center">

    </div>
  </div>
</div>
mahan
編集した答え 19日 9月 2019 в 7:00
解説 (0)