🖊️

text-align: center;はテキスト以外にも使えるの？

に公開
CSS
HTML 5
tech

背景

margin: 0 auto;で左右中央寄せできない時に、なんとなくでtext-align: center;を使っていたため、この際ちゃんと落とし込みたいと思った。

そもそもtext-align: center;とは？

要素に含まれるインライン要素やインラインブロック要素も水平方向の中央に寄せることができる。

インライン要素とは？

HTMLタグ 用途
<span> スタイルの適用など、特に意味を持たない汎用的な要素
<a> リンク
<strong> / <em> テキストを強調する
<label> フォーム部品のラベル
<input> フォームの入力欄

改行
<img> 画像（正確には置換インライン要素と呼ばれる特殊なインライン要素ですが、一般的な挙動はインライン要素と同じです）
  • 配置：前後の要素と同じ行に並ぶ
  • 幅：コンテンツの幅のみを占有
  • サイズ指定：widthやheightは無視される
  • 上下マージン：margin-top/margin-bottom は無効

インラインブロック要素とは？

インライン要素とブロック要素のいいところをもつ表示形式。
（※インラインブロック要素はHTMLのタグの種類ではなく、CSSのdisplayプロパティにinline-blockを設定することで実現される要素の振る舞いを指す）

  • 配置：前後に他のインライン要素やテキストがあれば、前後の要素と同じ行に並ぶ
  • サイズ指定：widthやheightが有効になる
  • 上下マージン：margin-top/margin-bottom が有効

実際の挙動

<div class="container">
    <img src="./img/cat_yannnoka_step_saba.png" alt="">
</div>


.container {
    padding: 50px 20px;

    img {
        width: 200px;
        height: 200px;
    }
}

アウトプット(text-align: center;指定前)

特に何か指定しているわけではないので、imgは左に寄ったまま。

.container {
    padding: 50px 20px;
    text-align: center;

    img {
        width: 200px;
        height: 200px;
    }
}

アウトプット(text-align: center;指定後)

imgタグがインライン要素なので親要素の.containerにtext-align: center;を指定することでimgを中央に配置することができる。

まとめ

要素の性質を理解することでどのように中央配置するのか迷わなくなる。
幅や高さ、余白をつけたいのであればdisplay: inline-block;を用いて実装する方が良さそう。
（複数のボタンを横並びにする時とか、ナブゲーションメニューとか）

Discussion