はじめに

CSSでは要素の寄せ方によってコードの書き方が変わってきます。要素が「インライン」なのか「ブロック」なのか、「左右寄せ」なのか「上下寄せ」なのか。そういったあらゆるパターンを今回はまとめてました。

事前知識

少し寄り道ですが、次の３つの違いについて押さえましょう。

比較

プロパティを使えるか

配置関係

要約

• インライン：左右のみ、間隔を空けられる。
• ブロック：上下左右、間隔を空けられる。
• インラインブロック：ブロックの「上下左右の間隔を空けられる」とインラインの「隣に並べられる」の特徴を兼ね備えている。

ネスト構造の場合

使用サンプル

ソースコードの簡略化のため、以降では下記プロパティについて記載しません。

<div class="parent">
　<span class="child">
　　テキストテキスト
　</span>
</div>

.parent {
　width: 400px;
　height: 200px;
　background-color: aquamarine;
　border: 1px solid aqua;
}

.child {
　background-color: coral;
　border: 1px solid chocolate;
}

左右中央寄せ

子がインラインの場合

※ margin-left／rightは固定値なら効くがautoは効かないので、margin 0 autoはできない。

.parent {
　text-align: center;
}

子がブロックの場合

.child {
  margin: 0 auto;
}

上下中央寄せ

子がインラインの場合

表示内容が１行の場合

インラインではheightは効かないがline-height(1行当たりの高さ)は設定できる。

※　2行以上の場合は、使用できない。

※　vertical-align: middleというものがあるが、これは「左隣のインライン要素」を基準にしているので、入れ子の親に対しては使用できない。

.child {
  line-height: 200px;
}

表示内容が２行の場合

⇒　display:inline-block or blockし、「子がブロックの場合」と同様の手順を取る。

子がブロックの場合

absoluteによる絶対座標で指定する。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY (-50%);
}

上下左右中央寄せ

子がインラインの場合

左右中央寄せ + 上下中央寄せを合わせる。

.parent {
  text-align: center;
}
.child {
  line-height: 200px;
}

子がブロックの場合

.parent {
  position: relative;
}
.child-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

中央寄せ以外の複雑な座標の場合

position:absoluteのtopやleftの値を20%, 30%など微調整する。

まとめ

※１：display: inline-blockによりブロック化

さいごに

この記事では、要素の配置の面倒くささについて学べたと思う。今回は子の要素が1つだけであったが、2つ以上となってくると正直もうお手上げになりそうだ。

しかし、実際にはdisplay:flexやdisplay:gridなどが、今回の問題を解決してくれる便利な機能があるらしい。

次回はそれらの使い方を取り上げていきたい。