css test-alignとmarginの中央のどんな違い

共通点
test-alignとmarginはどちらも中央に配置できます.
test-align:Center.
margin: 0 auto.
いいですが、違いを見てみましょう.

     

         
            good
         
     
 

ここではtext-alignも同様に適用しますが、spanは中央に位置し、divは中央に位置していません.この時私たちは概念を見てみましょう.
本文
コンセプト
基本概念:
1.text-align:属性は要素中のテキストの水平位置合わせを規定する.
このプロパティは、行ボックスがどの点に位置するかを指定することで、ブロックレベルの要素内のテキストの水平位置を設定します.
このアトリビュートは、通常、テキストの位置合わせを設定するときに使用されます.サポート値justify.
　　Example: div { text-align: left; }//テキストを左揃え
コメント:text-alignプロパティはすべてのブラウザでサポートされています.どのバージョンのInternet Explorer(IE 8を含む)でも属性値「inherit」はサポートされていません.
2.marginは、オブジェクトの四辺を設定するエピタキシャルエッジであり、外部パッチまたは外部距離と呼ばれます.
Example: div { margin: 20px 10px 30px 40px; }//対象外距離を表し、トップ20 px、右10 px、下30 px、左40 px
区別する
1.text-align:center設定テキストやimgラベルなどのインラインオブジェクト(またはそれに類似する要素)の中央.
2.margin:0 autoブロック要素(またはそれに類似する要素)の中央を設定します.
この2つの属性IEとFFの理解も異なる.画像imgラベルに段落Pを設定します.
に注意
注意:
1.body{text-align:center;}を設定します.
IEでは、段落P、ピクチャimgは同時に中央揃え、すなわちtext-align:centerを実現する.元素pと元素imgに同時に作用する.
FFでは、段落Pは、中央揃えを実現することができず、ピクチャimgは中央揃えを実現する、すなわちtext-align:center;imgタグに作用し、段落pタグは中央の役割を果たしていない.
2.段落p{margin:0 auto;}を設定します.
IEとFFでは,段落Pは共に中央揃えを実現している.画像imgは、作用オブジェクトではないため、中央揃えはしません.
3つのケースについて説明します.

margin:0 auto;のセレクタは、bodyではなくdiv,pなどの作用オブジェクトです.設定されている場合:body{margin:0 auto;}bodyの幅を定義しない限り、body内の要素の位置が変化します.body幅を500 pxに設定します.p段落を何も設定しないで、ウィンドウを最大化すると、段落がウィンドウの左上隅にないことがわかります.

段落p{text-align:center;}を設定する段落自体の位置合わせではなく、段落内の要素が中央に位置合わせされます.

画像ラベルimg{margin:0 auto;}を設定し、画像imgラベルのmarginプロパティを設定することはできません.設定する必要がある場合は、まずそのプロパティをブロック要素に変換します.次のコードのように、img{display:block;margin:0 auto;}

さらに説明すると、imgはレンダリング時に1画素の隙間があるので、display:inline-blockを設定することができます.この問題を解決します.