LoginSignup
0
0

More than 1 year has passed since last update.

【CSS】中央寄せ

Last updated at Posted at 2022-07-02

ブロック要素を中央寄せしたい場合①

ずばり!
親要素にCSSを追加しよう!

image.png

/*親要素の該当部分*/
display: flex;
align-items: center;
justify-content: center;

/*インライン要素を中央寄せしたい場合も親要素に指定*/
text-align: center;

ブロック要素を中央寄せしたい場合②

中央寄せしたい要素に margin : 0 autoを付与するよ!
親要素には手を加えなくてOK!

image.png

【重要】外枠のdiv領域のサイズ指定をする

div領域は、デフォルトでは領域が存在しません。
領域内に文字列や他要素があると、その分だけ高さが確保され、幅が100%広がります。

状況に応じて、枠内のコンテンツよりも大きめのサイズでheight と width を指定して外枠を明確にしましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0