鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

CSSで垂直方向真ん中にテキストを配置したい

垂直方向に真ん中にテキストを配置したい場合は良くある

結構あるんですよね。 ある範囲で、垂直方向真ん中にテキストを配置したいっていうこと。

垂直方向真ん中にテキストを配置したい
垂直方向真ん中にテキストを配置したい

その度に、 vertical-align が思い浮かぶんですが、毎回結局これを使わずに済ませることが多いように思います。

横に並んだブロック要素内のテキストが、文字やアイコンの大きさが違うため、横に並んでくれない! 並んでくれ〜! ということも何度か経験しました。

横に並べたブロック要素内のテキストの垂直位置を揃えたい
横に並べたブロック要素内のテキストの垂直位置を揃えたい

というわけで、毎回なんとなく悩んでいるので、今後の同様のパターンが起きた時に学びを重ねて追記することを念頭に置きつつ、今わかっていることをまとめておこうと思います。

議題としては、大きく2つ。

  • vertical-align ってどんな時は有効なんだっけ? 実際「垂直真ん中にテキストを配置したい」場合に使えるの??
  • それ以外で有効な「垂直真ん中にテキストを配置する」方法は何がある??

vertical-alignはそもそもtable-cellとinline要素にしか効かない

よく忘れるのでメモしてしっかり覚えたいと思うが、 vertical-align が使えるのは、table-cellか、inline要素である。 つまり、block要素などに使いたい場合は、 display: table-cell か、 display:inline-block を指定する必要がある。

vertical-alignで指定できるのは

  • baseline
  • text-bottom
  • middle
  • top

などがあるが、それぞれの要素が何かということによっても、結果の描写が異なるため、vertical-alignは結構使いにくい・・・。 思い通りにいかないことが多いです。

ということで、垂直方向で真ん中にテキストを配置したい場合に、よく使う順で方法を記載しておきます。

方法① 親要素のheightと子要素のline-heightを同じにする(textが一行の場合のみ有効)

これが一番簡単で、単純でわかりやすく、予想外の自体も起こりにくいです。

親要素のheightを設定し、子要素の line-height を同じ高さにします。 これで配置などを考えずとも、真ん中になってくれます。

ただし欠点があり、テキストが一行でないとうまく行きません。

方法② display: table-cell にしてvertical-align

これは vertial-align を使うケースです。 vertical-align を使う場合、一番予想外なことを起こさずにできるのは、 display: table-cell を指定しておいた時です。

要素をテーブルセルとみなすので、これであれば、一応複数行でも真ん中になってくれます。

ただ、やはり(原因が明確に理解できていないですが) vertical-align にありがちで、思うような配置になってくれない(効いてくれない)ことが起こりがちです。

方法③ 子要素にposition: absoluteを設定し、topを親要素の50%、margin-topを子要素の半分に設定

無理矢理ではありますが、こちらも変なことは起こりにくいやり方。

  • 親要素に、 position: relative 、子要素(テキスト)に position: absolute をつけます
  • 子要素の top に、 (親要素のheightの半分)から (子要素のheightの半分)を引いたもの を設定します

もしくは

  • 子要素の top に、 親要素のheightの半分 を設定し、 margin-top に、 ー(子要素のheightの半分) を設定します。

position: absoluteを使って配置を指定する場合
position: absoluteを使って配置を指定する場合

良い方法があったら追記します。