CSS ★ inline-blockで横並びにした要素を上揃えにする

kobato

4年前

CSSで横並びさせたい時によく使うのが、
display:inline-block。
でも、縦のラインがきれいに揃わないで困ることがある。

そんな時に、
たった1行追加するだけでOKなセレクタがあった！

それは、vertical-align。

＜使い方＞

.test {
  display: inline-block;
  vertical-align: top;
}

vertical-align: top; としてやれば、上揃えになります！
ちなみに、中央揃えにしたいときは、
vertical-align: middle; とすればOK。