More than 3 years have passed since last update.

【中央寄せ】text-align: center;とmargin: 0 auto;の違い・使い分け ❏CSS❏

Last updated at 2019-12-13Posted at 2019-12-01

#【結論】

###・インライン要素には、text-align: center;
###・ブロック要素には、margin: 0 auto;

そもそもインライン要素・ブロック要素とはなんぞやという方はこちらが参考になります。 >https://saruwakakun.com/html-css/basic/display
#`text-align: center;`を使う時

ただのテキストもしくは、
aタグ、imgタグなどのインライン要素が中央に寄る。

####※親要素にあてること！

xxx.html

<div class="manbow">
  <a href="...">マンボウ</a>
</div>

xxx.css

.manbow {
  text-align: center;
}

aタグはdiv要素の中で中央に寄りました。

#`margin: 0 auto;`を使う時

divタグ、pタグなどのブロック要素が中央に寄る。

####※中央寄せしたい要素本体にあてること！

xxx.html

<div class="manbow">
  <a href="...">マンボウ</a>
</div>

xxx.css

.manbow {
  width: 100px;
  margin: 0 auto;
}

ブロック要素は基本的に横いっぱいに広がっています。
それだと中央に寄らないので、widthで幅を指定してあげます。

注意したいのは、div要素自体は中央に寄りましたが、中のリンクは中央に寄っていない点です。
div要素を中央に寄せ、更に中のリンクもその中で中央に寄せたい場合はtext-align: center;をあてる必要があります。

xxx.css

.manbow {
  width: 100px;
  margin: 0 auto;
  text-align: center;
}

すべてが中央に寄りました。

#まとめ

#####text-align: center;
・インライン要素が中央に寄る
・親要素にあてる

#####margin: 0 auto;
・ブロック要素が中央に寄る
・要素本体にあてる
・要素の幅を指定してあげる

参考 >https://saruwakakun.com/html-css/basic/centering
ではまた！