【勉強メモ】CSS 上下左右中央揃え
基本の3パターン
★前提
インライン(コンテンツ)要素=ブロックの中身
ブロックレベル=外枠
フレックスボックス=別の考え方
→フレックスコンテナ(親)の中にフレックスアイテム(子)がある
インライン要素
左右中央 text-align: center;
上下中央 vertical-align: middle;
を中央揃えにしたいインライン要素につける。
ブロックの中でインラインコンテンツが中央になる。
出典3
text-alignがつかない!!
positionを使った例
ブロック要素
左右中央 margin: 0 auto;
を中央揃えにしたいブロック要素につける。
全体の中でブロックレベルが中央になる。
Flexbox
1.困ったらこれ
.container {
display: flex;
justify-content: center;
align-items: center;
}
親につける!!!
text-alignを使わなくても、親を作って(divとか)付ければテキストにも使える。 出典2
2.別バージョン
.container {
display: flex;
}
.box {
margin: auto;
}
container=親 box=子
注意点:親要素と子要素の両方にスタイルを設定する必要がある。
インライン扱いの要素には適用できないため、ブロック扱いの要素に変更が必要。 出典2
番外編
display: grid; フレックスではないけど、似た感じで使えて便利!
.container {
display: grid;
place-items: center;
}
出典2
縦方向に中央揃えしたい時など、flexbox以外の選択肢として使える!
こちらを参照 https://web-de-asobo.net/2021/11/29/vertical-center/
display: table;
display: table;
margin: 0 auto;
「display: table;」と「margin: 0 auto;」で中央に配置。
※テキストの長さに応じて可変で中央配置できる。
出典:https://code-step.com/photo2-code/
最後にチートシート↓
出典2:https://ics.media/entry/17522/
出典3:https://proengineer.internous.co.jp/content/columnfeature/6343
この記事が気に入ったらサポートをしてみませんか?