【 上下左右中央揃え 】超簡単に上下左右中央に揃える方法~CSS入門~
このような方にオススメの記事
- CSSの学習を始めた方
- CSSでテキストの配置を自由に変更したい方
この記事では、CSSでテキストの配置を上下中央揃えにする方法を紹介していきたいと思います。
ブロック要素の高さ(height)とインライン要素の行の高さ(line-height)を同じにする。
下記コードが中央揃えの例になります。
ここでは、親ブロック要素の高さ200pxに対して、子インライン要素の行の高さも同様200pxに指定しています。
たったこれだけで、垂直方向の中央揃えができます。
あとは、ブロック要素に水平方向の中央揃えであるtext-align:center;を指定すれば、ブロック要素の上下中央に配置できます。
See the Pen by Shuhei Nishida (@shu0814) on CodePen.
注意点
この方法は、インライン要素が一行の時だけに使える方法です。
複数行になると、インライン要素の高さがブロック要素の高さを超えてしまうため、垂直方向の中央揃えがうまくいきません。この方法はメインビジュアルのでタイトルをど真ん中に配置するときなどに使えるかなと思います。
テキストの垂直方向、水平方向の配置の指定はそれぞれ下記記事で解説しているので、２行以上のテキストの配置の指定をする場合は、こちらを参考にしてみてください。
以上ど真ん中に配置する方法でした。超簡単なので、ぜひ使ってみてください。
ABOUT AUTHOR
シュウヘイ
フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。
