1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【CSS】中央寄せ(水平方向)

Last updated at Posted at 2024-11-19

インライン要素(display: inline)の中央寄せ

<a> <span> <strong> <label> など (※初期値がdisplay: inline)

インライン要素.png
①設定なし
②親要素にtext-align:center
③親要素にtext-align:center 
④親要素にdisplay:flex ※flex-direction: rowの場合(※初期値)
     justify-content:center

ブロック要素(display: block)の中央寄せ

<div> <p> <h1~h6> <ul> <ol> <li> <table> <form> <section> <article> <nav> など
(※初期値がdisplay: block)

ブロック要素.png
①設定なし
②自分自身にmargin: 0 auto
③自分自身にmargin: 0 auto 
④親要素にdisplay:flex ※flex-direction: rowの場合(※初期値)
     justify-content:center

インラインブロック要素(display: inline-block)の中央寄せ

<button> <input> <textarea> <img> など(※初期値がdisplay: inline-block)

インラインブロック要素.png
①設定なし
②親要素にtext-align:center
③親要素にtext-align:center 
④親要素にdisplay:flex ※flex-direction: rowの場合(※初期値)
     justify-content:center

1
0
1

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?