こんにちは、WEBクリエイターのkabosuです。
先日に引き続き、今回はHTMLとCSSの上下中央寄せについて、ブロック要素・インライン要素・インラインブロック要素別にまとめてみましたー！
複雑なデザインになると、意外と戸惑ってしまう上下中央寄せ。。。
サイトのレイアウトをキレイに見せるために、結構指定することが多いんですよね～
できればスマートに、コードも少なく実装したいものです。
ブロック要素の上下中央寄せについては、4つの方法をご紹介します。
まず1つめの方法として、padding-top、padding-bottomを使って上下中央寄せさせる方法があります。
See the Pen
上下中央寄せ-ブロック要素 by kabosu-YN (@kabosudayo)
on CodePen.
中央寄せしたいブロック要素の親にタグ(下記のソースだとdivタグ)を追加し、display:flex;と、align-items:center;を指定します。
See the Pen
上下中央寄せ-ブロック要素(flex) by kabosu-YN (@kabosudayo)
on CodePen.
複雑なデザインになるといろいろ指定しないといけなくなってしまいますが、横並びのあるレスポンシブデザインではこれが最適。
1カラムonlyの場合はなんだか本来の使い方と違う気がするため、あまり使いたくない。←個人的な意見です。
中央寄せしたいブロック要素の親にタグ(下記のソースだとdivタグ)を追加し、親要素にはposition:relative;とheightを指定します。
中央寄せしたい子要素自身にはposition:absolute;を指定し、top: 50%を指定するのですが、この時に子要素の高さの50%分下にずれてしまうため、transform:translateY(-50%)で戻してあげます。
top:50%は親要素の高さの50%になるのですが、transform:translateY(-50%)の%は子要素の高さを参照しています。
See the Pen
上下中央寄せ-ブロック要素(positionを使う) by kabosu-YN (@kabosudayo)
on CodePen.
positionを使った配置は慣れるまでややこしいのですが、個人的に一番この方法が好きです。
高さを指定したくない場合もあると思うので、その場合はこの方法以外で実装することになります。
line-heightでの中央寄せです。1行のみのパターンに使えます。折り返しが発生する場合は使えませんが、シンプルで便利です！
See the Pen
上下中央寄せ-ブロック要素(line-heignt) by kabosu-YN (@kabosudayo)
on CodePen.
インラインブロック要素の上下中央寄せは3つ紹介します。といっても、ブロック要素の指定と同じです。
See the Pen
Untitled by kabosu-YN (@kabosudayo)
on CodePen.
See the Pen
上下中央寄せ-インラインブロック要素(flex) by kabosu-YN (@kabosudayo)
on CodePen.
See the Pen
上下中央寄せ-インラインブロック要素(position) by kabosu-YN (@kabosudayo)
on CodePen.
インラインブロック要素についても、ブロック要素かインラインブロック要素とだいたい同じで、いままで紹介した方法そのままもしくは一部指定を変えることによって上下中央寄せが可能になります。
インライン要素にdisplay:blockもしくはdisplay:inline-blockを指定して、あとはブロック要素やインラインブロック要素と同じ指定です。
See the Pen
上下中央寄せ-インライン要素(padding) by kabosu-YN (@kabosudayo)
on CodePen.
flexを使ったインライン要素の上下中央寄せは、ブロック要素・インライン要素と同じです。
インライン要素自身のdisplayプロパティを変えずに中央寄せ指定できるのが強みです。
こういうところ、flexboxは便利だなーと思わされますね・・・！
See the Pen
上下中央寄せ-インライン要素(padding) by kabosu-YN (@kabosudayo)
on CodePen.
こちらも
ブロック要素・インライン要素の時の指定のまま使えます。
See the Pen
上下中央寄せ-インライン要素(position) by kabosu-YN (@kabosudayo)
on CodePen.
いかがでしたでしょうか？ほかにも、display:table-cellを使った方法もあります。ただ、display:table-cellを使用しよってなることがほぼないので、今回割愛しました。
コーディングはいろんなデザインパターンやデバイス間のレイアウト調整に対応することが必要なため、あれこの時どうするんだったっけと戸惑っても引き出しさえ増やせばスマートに対応できます。
中央寄せは基本的なことなので、さまざまな方法を覚えているとお得です。