web-dev-qa-db-ja.com

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>
twitter-bootstrapbootstrap-4
44
Daniel

デフォルトでは、画像はインラインブロックとして表示されます。.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 を両方の方法で示しました。それらは文書化されています here も同様です。

83
tmg

Imgはインライン要素なので、コンテナでtext-centerを使用するだけです。 mx-autoを使用すると、コンテナ（列）も中央に配置されます。

<div class="row">
    <div class="col-4 mx-auto text-center">
        <img src="..">
    </div>
</div>

中央に画像のみを表示する（他の列コンテンツは表示しない）場合は、display:blockクラスを使用して画像をd-blockにすると、mx-autoが機能します。

<div class="row">
  <div class="col-4">
    <img class="mx-auto d-block" src="..">
  </div>
</div>

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

14
Zim

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

  1. imgはインライン要素です。コンテナがblock要素である場合、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>
  1. 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>
  1. 親で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>
8
mahan