CSS

align-itemsを使ってみよう

Flexbox内の要素を縦方向で中央揃えにするために、align-itemsを使っていきます。

  • align-items

align-items

・headerの内側の領域に余白を作り、中の文章を縦に中央揃えにする方法についてみていきます。

・まずheaderの内側なのでpaddingに対して余白を作っていけばいいのでpadding-topとpadding-bottomに同じだけ余白を指定していきます。

・次にflexbox内の要素の縦方向に中央揃えする方法ですが、align-itemsをcenterと指定するといいでしょう。今回の場合は.containerにalign-items:center;と指定しましょう

・最後に確認のための背景色を消してあげればスッキリとしていくと思います。

ー広告ー

 

 






-CSS