垂直方向で中央寄せ

Tag:

垂直方向で中央寄せをする例を紹介します。

これを中央寄せしたい

・1行の文章
・2行の文章
・block要素(100(w) 150(h))

で構成されています。

この要素を垂直方向に中央寄せしていきます。

vertical-alignを利用

垂直方向に中央寄せは、「vertical-align: middle」でできます。

「vertical-align」は、
「display: table-cell」と「display: inline-block」
で利用できます。

まずは、「display: table-cell」で利用してみます。

簡単ですね。ただし、幅が自動で伸びてしまいます。

次に「display: inline-block」を利用します。

青色のblock要素は右寄せにしたいので、positionを利用してもう一工夫します。

flexboxを利用

flexboxだととても楽です。

スポンサーリンク