MW211 EXIT

devlog
CSS/vertical-alignの誤解
2014年03月08日
tdタグ中の文字は、既定で「vertical-align:middle;」なので
縦位置は中央に表示される。

で、tdタグをdivタグに移行した場合、divタグに「vertical-align:middle;」を
指定してもうんともすんともいわない(上詰になる)。

「vertical-align」が使えるのは、テーブルセルとインライン要素のみで、
ブロック要素のdivタグでは無効ということだ。

インライン要素ってそもそもブロック要素と違って縦幅とか指定できなかったはずだ。
ということで、テーブルセルの代替となるようなものはない…と思いがちだが、
spanタグの「line-height」を広げれば、そんな感じにはなる。
┌──────────────────────────────────────┐
│span {                                                                      │
│    line-height         :160px;                                             │
│    vertical-align      :middle;                                            │
│}                                                                           │
└──────────────────────────────────────┘
但し、spanタグ中で改行が入ると「line-height」毎に一行ずつ表示されるから注意。
分類:CSS