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

質問

BootstrapのCSS-classだけを使って、画像を中央に配置するのに苦労しています。私はすでにいくつかのことを試してみました。一つは、Bootstrap CSS-classを追加した 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>

どのように解決するのですか？

デフォルトでは画像はinline-blockで表示されます。 .mx-auto . これは、組み込みの .d-block :

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

または、inline-blockのまま、divで囲んで .text-center :

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

を作りました。 フィドル を作成し、両方の方法を示しました。 これらは文書化されています はこちら にもあります。