HTMLで中央寄せする方法【現役エンジニアが解説】
今回は、HTMLで中央寄せする方法について、対象がインライン要素とブロック要素の場合に分け、簡単に解説していきます。
インライン要素の中央寄せ
インライン要素を中央寄せするには、スタイルのtext-alignプロパティをcenterにします。
親要素のtext-alignプロパティをcenterにすると、インライン要素の子要素全てが中央寄せされます。
<div style="text-align:center;"> <span>ほげ</span> </div>
上記のコードでは、親要素であるdiv要素のtext-alignプロパティをcenterにすることで、子要素のspan要素を中央寄せしています。
ブロック要素の中央寄せ
ブロック要素の中央寄せは、幅を指定し、marginプロパティ(左右)をautoにします。
marginプロパティをautoにすると、設定した要素そのものが中央寄せされることになります。
<div style="width:200px;margin-left:auto;margin-right:auto;">ほげ</div>
上記のコードでは、div要素のmarginプロパティ(左右)をautoにすることによって、div要素自体を中央寄せしています。
全子要素の中央寄せ
インライン要素とブロック要素の両方を中央寄せする場合は、CSSを使います。
text-alignプロパティをcenter、全子要素のmarginプロパティ(左右)をautoに設定します。
.center{ text-align:center; } .center *{ margin-left:auto; margin-right:auto; }
上記のコードでは、centerというクラスを持つ要素の全ての子要素を中央寄せさせています。