Flexboxで上下揃えができない

  • 2019.08.04
  • CSS
Flexboxで上下揃えができない

Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。

上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。
これは左右揃えの時も同じですが、” margin : auto ; ” を指定していると上手く設定できません。

ですので、子要素側に” margin  ”を設定します。

当たり前の設定で、上下揃えをする事ががインライン要素の時ぐらいしか無いので、気づくのに時間がかかってしまいました。
(左右揃えだったらすぐに気づくんですが・・・)

僕は、CSSのリセット設定で、“*{ margin:0; } ”とリセットしていますが、”div”と”table”は ” margin : auto ; ” の設定していたのが、原因でした。
他にも、HTML5のリセットでもよく”div”と”table”の ” margin : auto ; ” が設定されています。

 

CSSカテゴリの最新記事