はじめに

これは「Happiness Chain Advent Calendar 2023」の3日目の記事です。

今まで何度となく同じミスを繰り返し、そのたびにググってきたので、いい加減に自分でまとめたいと思います。

この記事では flexbox や縦（垂直）方向の中央寄せについては記載しません。

ブロック要素とインライン要素のおさらい

中央寄せしたい対象がブロック要素なのかインライン要素¹なのかによって、CSSの指定方法は異なります。

ですので、まずはブロック要素とインライン要素の特徴や違いについて、ポイントを押さえておきましょう。

この辺りが理解できていないと、過去の私のように同じミスを繰り返すことになります。。

ブロック要素

ブロック要素は、HTMLを構成する基本となる要素です。

<main>, <h1>, <table> , <div>, <p> などがブロック要素です。

ブロック要素の主な特徴

改行される
要素が縦並びになる
中身の長さに関わらず、親要素の幅いっぱいに広がる

これらの特徴を具体例で確認してみましょう。

わかりやすいように、<p> 部分にだけ背景色をつけています。

index.html

 <div>
    <p>
        1つ目の段落です。これはブロック要素の説明用の文章です。
        ブロック要素はこのように一つのかたまりとなり
        親要素いっぱいに広がります。
    </p>
    <p> 2つ目の段落です。</p>
</div>

style.css

p {
    background-color: greenyellow;
}

文章の長さに関わらず <p> の領域が幅いっぱいに広がっている点を特に確認しておいてください。

インライン要素

インライン要素は、文章の一部に対しスタイルやリンクなどの機能を適用します。

<span>, <a>, <strong>などがインライン要素です。

インライン要素の主な特徴

改行されない
要素が横並びになる
中身の長さで幅が決まる
行の一部にすぎないので余分な余白がない

これらの特徴を具体例で確認してみましょう。

わかりやすいように、インライン要素である <span> 部分にだけ背景色をつけてみます。

index.html

<p>pはブロック要素ですが、<span>spanはインライン要素</span>です。</p>

style.css

span {
    background-color: greenyellow;
}

中身の文章の長さによって <span> の長さが決まっている点と、<span>タグの前後に余分な余白がない点を特に確認しておいてください。

それでは、特徴がわかったところで、さっそく中央寄せしていきましょう。

なお、各要素についてもっと知りたい方は、末尾に詳細な表を載せていますので、そちらをご参照ください。

インライン要素を中央寄せしたい場合

まずはインライン要素からです。

例として、インライン要素の一つである <img> を中央寄せしていきます。

青い背景の <div> 内にオレンジ色の画像 <img>があるとします。

index.html

<div class="parent">
    <img class="child" src="./sample.png">
</div>

style.css

.parent {
    height: 300px;
    width: 300px;
    background-color: blue;
}

初期配置は左寄せになっています。

インライン要素の中央寄せには、text-align:center;を使います。

ただし、指定する対象を間違えないように！

子要素ではなく親要素に指定してください！

誤った例

style.css

.child {
    text-align:center;
}

正しい例

text-align はあくまで親要素を元にして子要素をどこに配置するかを決めるプロパティです。

なので、中央寄せしたい要素自体ではなく、その親要素に text-align を指定する必要があります。

style.css

.parent {
    height: 300px;
    width: 300px;
    background-color: blue;
    text-align: center; /* 追加 */ 
}

無事に中央寄せできました。

ブロック要素を中央寄せしたい場合

次にブロック要素の中央寄せを見ていきます。

ブロック要素の中央寄せには、margin: 0 auto; または display:inline-block; を使用します。

まずは前者から。

`margin` を利用して中央寄せする

margin は左右の余白を設定するプロパティです。

margin: 0 auto; は、上下の余白を0、左右の余白をautoに設定しています。
autoとすると自動的に余白を調節してくれて中央寄せが実現できます。

例として、ブロック要素の一つである<div>を中央寄せしていきます。

白い背景の<body>の中にピンク色の<div>があるとします。

index.html

<body>
    <div class="block">
    </div>
</body>

style.css

.block {
    width: 70px;
    height: 70px;
    background-color: pink;
}

初期配置は左寄せになっています。

正しい例

margin: 0 auto;を指定すると中央寄せできます。

style.css

.block {
    width: 70px;
    height: 70px;
    background-color: pink;
    margin: 0 auto; /* 追加 */
}

誤った例

width を指定していないブロック要素は中央寄せできません。

style.css

.block {
    /* widthが指定されていない */
    height: 70px;
    background-color: pink;
    margin: 0 auto;
}

なぜなら、ブロック要素は幅を指定しなければ親要素の幅いっぱいに広がるからです。

親要素の幅いっぱいということは、左右に余白なんてないので、当然中央寄せされないということになります。

インライン要素やインラインブロック要素も行の一部分にすぎず余分なmarginがないため、margin: 0 auto;は効きません。

インラインブロック要素へ変更して中央寄せする

ブロック要素を中央寄せする方法として、ブロック要素をインラインブロック要素へ変更するという方法もあります。

そうすれば、インライン要素と同じくtext-align:center;が使用できます。

インラインブロック要素とは、インライン要素とブロック要素の両方の良いとこどりした要素です。

「要素は横並びにしたいけど、width, height, margin, paddingも設定したい！」といったときにインラインブロック要素に変更することが多いようです。

インラインブロック要素への変更は、変更したい要素にdisplay:inline-block; を指定するだけです。

例として、子要素の <div> をインラインブロック要素に変更し、中央寄せしていきます。

青い背景の <div> 内に、オレンジ背景の <div>があるとします。

index.html

<div class="parent">
    <div class="child">
    </div>
</div>

style.css

.parent {
    width: 100px;
    height: 100px;
    background-color: pink;
}
   
.child {
    width: 40px;
    height: 40px;
    background: blue;
}

初期配置は左寄せになっています。

中央寄せしたい子要素にdisplay:inline-block;を指定します。

そして、インライン要素の章でやった通り、親要素にtext-align:center;を指定します。

style.css

.parent {
    width: 100px;
    height: 100px;
    background-color: pink;
    text-align: center; /* 追加 */
}
   
.child {
    width: 40px;
    height: 40px;
    background: blue;
    display: inline-block; /* 追加 */
}

中央寄せできました。

まとめ

親要素・子要素の種類ごとに、中央寄せする方法を表にしました。

おまけ：各要素の特徴

各要素の特徴を詳しくまとめた表を置いておきます。

	インライン要素	ブロック要素	インラインブロック要素
用途	文章の一部に対しスタイルやリンクなどの機能を適用する	文書の構造やレイアウトを決定する	インライン要素とブロック要素の良いところどり
要素の例	img, span, textarea, input, label, br etc...	div, table, form, ul, p, h1~h6, header, main, section etc...	※ 初期値がインラインブロック要素である要素は存在しない
指定方法	`display: inline;`	`display: block;`	`display: inline-block;`
並び順	横並び	縦並び	横並び
前後の改行	無	有	無
widthの初期値	要素内の中身と同じ幅になる	親要素の幅いっぱいに広がる	要素内の中身と同じ幅になる
heightの初期値	要素内の中身と同じ高さになる	要素内の中身と同じ高さになる	要素内の中身と同じ高さになる
width/heightの指定	不可	可	可
marginの指定	左右のみ可	上下左右可	上下左右可
paddingの指定	左右のみ可（上下は他の要素に被る）	上下左右可	上下左右可

imgはインライン要素ですが、特別に幅と高さの設定ができます

参考

インラインレベル要素、ブロックレベル要素ともいわれます ↩