ここから本文です

margin:0 auto; と text-align:center; の違いを超簡単に教えてください。

xxs********さん

2019/5/1923:13:33

margin:0 auto;

text-align:center;
の違いを超簡単に教えてください。

閲覧数:
17
回答数:
3

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

leg********さん

2019/5/2005:11:38

超簡単にお答えします。

margin:0 auto;
これは、要素の外部に作用します。

text-align:center;
これは、要素の内部に作用します。

  • この返信は取り消されました。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/5/20 12:22:13

皆さんとても分かり易い解答ありがとうございました!
どれもすごく分かりやすかったのですが、今回は簡潔に説明してくれた方をベストアンサーとさせて頂きます。
ありがとうございました。

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

hin********さん

2019/5/2004:05:04

中央揃え
text-align:center;

/text / text-align:left
/ text / text-align:center
/ text/ text-align:right

--------------------------------------

マージン左右がauto、上下0
margin:0 auto;

これは省略せず書くと以下の通りです。シンプルな意味はこれだけです。
margin-left:auto
margin-right:auto
margin-top:0
margin-bottom:0

--------------------------------------

ここに親ボックスとwidth属性の固定値が加わるとblockの中央寄せに使うことができます。

<div class="parent">
<div class="child">text</div>
</div>

.child{
width:300px;
margin:0 auto
}

/---auto---/text (300px) /---auto---/

図の意味が伝わればと思うんですが、textが中央寄せになるのは上だけです。下のケースはblock(例ならchildクラス)が中央に寄ります。

h4r********さん

2019/5/2000:06:41

コンテナを中央揃えにする際の話だとおもうのですが、

margin: 0 auto;
は上下のマージンを0にして、左右のマージンを自動とする。という記述になり、

text-align: centerは
bodyに対して指定するとコンテナを中央揃えにできますが、コンテナに含まれる内容まで中央揃えになってしまいます。

Windows IEの5.5以前では、margin: 0 auto;が正しく機能せず、中央に寄らないというバグがありました。
そのため、bodyセレクタに対してtext-align: centerを使用し、
中身が中央揃えになってしまったコンテナに対してtext-align: leftを指定する手法がよく用いられていました。

以上の解答でいかがでしょうか。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる