マンガでわかるホームページ作成

CSS display:blockを中央寄せする方法

中央寄せと言えばtext-align:centerなのにdisplay:blockを指定したら中央寄せにならないぞ?どうやるんだ?

そんなCSS display:blockを中央寄せする方法について解説します。

結論:margin:autoとwidthを指定する

display:blockの中央寄せ
<style>
.blockcenter{
    /*コレ*/margin: auto;
    /*コレ*/width: 300px;
    height: 100px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>

<div class="blockcenter">
display:blockの中央寄せ
</div>

marginは外側の余白を指定するCSSです。

autoにすると左右の余白を自動で取ってくれて中央寄せになります。

display:blockを指定するとブロック要素になり、何も指定しないと横幅いっぱいになります。これでは左右に余白がないため中央寄せになりません。

よってwidthを指定する必要があります。

中身を中央寄せするには「text-align:center」

display:blockの中央寄せ
<style>
.textcenter{
    /*コレ*/text-align: center;
    height: 100px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>

<div class="textcenter">
display:blockの中央寄せ
</div>

子要素を中央寄せするにはtext-align:centerを指定します。

ただし、text-align:centerで中央寄せになるのはインライン要素のみです。

ブロック要素はmargin:autoで中央寄せしましょう。

【まとめ】CSS display:blockを中央寄せする方法

margin:autoとwidthを指定する

以上、CSS display:blockを中央寄せする方法でした。

関連記事