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>
デフォルトではイメージはインラインブロックとして表示されますが、.mx-auto
でセンタリングするためには、ブロックとして表示する必要があります。これは組み込みの .d-block
で実現できます。
<div class="container">
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="...">
</div>
</div>
</div>
または、インラインブロックのままにして、.text-center
でdivで囲むこともできます。
<div class="container">
<div class="row">
<div class="col-4">
<div class="text-center">
<img src="...">
</div>
</div>
</div>
</div>
両方の方法を示す[fiddle][1]を作りました。 これらはここでも説明されています。
img はインライン要素なので、コンテナに対して text-center
を使用するだけです。また、mx-auto
を使用すると、コンテナ(カラム)もセンタリングされます。
<div class="row">
<div class="col-4 mx-auto text-center">
<img src="..">
</div>
</div>
画像だけを中央揃えにしたい場合は、d-block
クラスを使用して画像を display:block
にすると、mx-auto
が動作します。
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="..">
</div>
</div>
img
を親の中央に配置する3つの方法があります。img
はインライン要素ですが、text-center
はインライン要素をそのコンテナの中央に整列させます。<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col text-center">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
</div>
</div>
</div>
mx-auto
は block
要素をセンタリングします。そのためには、d-block
クラスを用いて、imgのdisplay
をinline
からblock
に変更します。<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid d-block mx-auto">
</div>
</div>
</div>
3.親には d-flex
と justify-content-center
を使用します。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col d-flex justify-content-center">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
</div>
</div>
</div>