【CSS】テキストを垂直方向にセンタリング

divで要素を作り込んでいるときに、
3つの隣り合うブロック要素内にテキストが1行、2行、1行という箇所があったんですね。

で、1行のところは当然、2行のブロック要素の1行目と同じ高さに表示されます。

あああ | あああ | あああ
| いいい

↑↑↑ こんな感じ。

これじゃカッコ悪いので、左右の1行のブロック要素内は垂直方向にセンタリングをかけたかったのです。

・・・が、vertical-alignではセンタリングができず、見事にはまりました。。。

どうやら vertical-align はインライン要素にしか適用されないそうです。

で、いとも簡単に実現できるテクニックを紹介してくださっているサイトが!!

【垂直方向のセンター寄せ
http://www.stylish-style.com/csstec/basic/p-vertical.html

なんと、line-heightを使うだけ!!

あまりのお手軽さに、なんで気づかなかったのだろうと思いましたが、私の実力です(笑)

非常に役に立ちました。

ありがとうございます!!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク