2020/11/08

HTMLで中央寄せする方法【現役エンジニアが解説】

PROGRAM

今回は、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というクラスを持つ要素の全ての子要素を中央寄せさせています。

• facebook
• Tweet
• Read Later