CSS margin: 0 autoが効かない時の対処法

margin: 0 autoが効かない時の対策

margin: 0 autoを使えば要素を中央寄せできます。

要素をうまく中央寄せにできない場合の対策法を説明します。

   <div class="wrapper">
  
      <img src="画像">

</div>


 img{

   margin: 0 auto;
  
}

画像が中央に配置されない原因は、

margin: 0 autoを使うためには、要素に明確な幅を指定する必要があります。


 img{
   width: 200px;
   margin: 0 auto;
}

margin: 0 autoはインライン要素では使えません。インライン要素をブロック要素に変更する必要があります。

インライン要素とブロック要素については↓を参照してください

 
 img{
   width: 200px;
   margin: 0 auto;
  display: block;

}

画像が中央に配置されました。

margin: 0 autoが効かない時の対処法。

インライン要素をブロック要素をに変更。幅を指定する。

floatやpositionプロパティ、position:fixed, position:absoluteが適用されてる場合も機能しません。