CSS

inline-blockで上下が中央に揃えるのに時間かかった

More than 1 year has passed since last update.

横並びの要素を上下中央に揃えたかったのに上手くいかず、少し詰まったのでメモ。

原因

flexでの揃え方など、別な方法とごっちゃになってた。

解決法

  • 親要素にheightとline-heightを同じサイズで指定
  • 子要素にvertical-align: middleを指定

これだけ。

.parent {
    height: 100px;
    line-height: 100px;
}
.parent .child {
    display: inline-block;
    vertical-align: middle;
}

上下中央の指定とか左右中央の指定、結構忘れる。。。