CSSの絶対配置(absolute)とvertical-alignの設定

2016年09月15日

  1. TOP
  2. BLOG
  3. css
  4. CSSの絶対配置(absolute)とvertical-alignの設定

デザインのレイアウトの都合上、絶対配置(position: absolute)と中段寄せ(vertical-align: middle)を併用しなければいけないケースがあります。
ただ中段寄せをするためにはdisplay: table-cellにする必要があります。

同じタグにabsoluteとtable-cellは併用出来ない?

上記の様に記述してしまうとvertical-align:middleが効きません。
absoluteを指定したタグはブロック要素となるためtable-cellが使用できなくなるからです

実現するためには

タグを1つ増やし親のタグに絶対配置、子のタグに中段寄せを設定すれば実現出来ます。