Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@wsigma21

【CSS】もう二度と「なんで中央寄せされてないの？！」なんて言わない

Posted at

はじめに

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

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

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

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

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

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

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

ブロック要素

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

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

ブロック要素の主な特徴

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

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

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

index.html
 <div>
    <p>
        1つ目の段落です。これはブロック要素の説明用の文章です。
        ブロック要素はこのように一つのかたまりとなり
        親要素いっぱいに広がります。
    </p>
    <p> 2つ目の段落です。</p>
</div>
style.css
p {
    background-color: greenyellow;
}

block_sample.png

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

インライン要素

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

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

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

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

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

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

index.html
<p>pはブロック要素ですが、<span>spanはインライン要素</span>です。</p>
style.css
span {
    background-color: greenyellow;
}

inline_sample.png

中身の文章の長さによって <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;
}

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

block_before.png

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

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

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

:x: 誤った例

style.css
.child {
    text-align:center;
}

:o: 正しい例

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

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

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

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

block_after.png

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

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

ブロック要素の中央寄せには、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;
}

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

left_block.png

:o: 正しい例

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

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

center_block.png

:x: 誤った例

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

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

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

full_width.png

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

インライン要素やインラインブロック要素も行の一部分にすぎず余分な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;
}

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

block_before.png

中央寄せしたい子要素に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; /* 追加 */
}

中央寄せできました。

block_after.png

まとめ

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

inline_block_table.png

おまけ：各要素の特徴

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

インライン要素 ブロック要素 インラインブロック要素
用途 文章の一部に対しスタイルやリンクなどの機能を適用する 文書の構造やレイアウトを決定する インライン要素とブロック要素の良いところどり
要素の例 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はインライン要素ですが、特別に幅と高さの設定ができます

参考

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

3
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?