margin:0 auto と body{text-align:center;} を正しく使用して、element_html/css_WEB-ITnose を中央に配置します。

body{text-align:center} と margin:0 auto の類似点と相違点は何ですか?

text-align は、オブジェクト内のテキストの配置を設定するために使用されます。通常の状況では、この属性を使用してテキストの配置を設定する必要があります

オブジェクトの水平方向の中央揃えを設定するとき、多くの場合、これを実現するために左右のマージンを auto に設定します

text-align:center は text に設定されますまたは、img タグなどの一部のインライン オブジェクト (または同様の要素) の中央揃え。 margin:0 auto は、ブロック要素 (または同様の要素) の中央揃えを設定します。しかし、これら 2 つの属性 IE と FF の理解も異なります。

段落Pを設け、段落内にimage imgタグがあります。
body{text-align:center;} を設定します。IE では、段落 P と画像 img が同時に中央に配置されます。つまり、text-align:center; は要素 p と要素に作用します。同時に画像を作成します。
FFでは、段落Pは中央揃えを実現できませんが、画像imgは中央揃えを実現します、つまり、text-align:center;はimgタグに作用しますが、段落pタグは中央揃えの役割を果たしません。

段落p {margin:0 auto;}を設定します。段落 P は IE と FF の両方で中央に配置されていることがわかりました。画像 img はアクション オブジェクトではないため、中央には配置されません。

説明する必要がある状況は 3 つあります:

1. 友人が操作しているときに、margin:0 auto; のセレクターを混同しました。body ではなく、div、p などのターゲット オブジェクトである必要があります。 。 body { margin:0 auto; } を設定した場合、本文の幅を定義しない限り、効果は得られず、本文内の要素の位置が変更されます。たとえば、本文の幅を 500px に設定します。 p 段落の設定を何も行わずにウィンドウを最大化すると、その段落がウィンドウの左上隅にないことがわかります。

第二に、段落 p {text-align:center;} を設定して実現するのは、段落自体の配置ではなく、段落内の要素の中央揃えです。

第三に、画像タグ img {margin:0 auto;} を設定するときに、ちょっとした間違いを犯しました。img はインライン オブジェクトのクラスであり、どうしても必要な場合は画像 img タグの margin 属性を設定することはできません。これを設定するには、まず、その属性を次のコードのようなブロック要素に変換します: img {display:block; margin:0 auto;}

ページ上の要素がすべて div タグまたは他のブロック要素内にある場合、合理的なネストなので、body{text-align:center}を設定する必要はありません。対応する div 要素 margin:0 auto; を設定するだけです。上記のコードで説明されているように、ページ上の要素はすべて段落 p タグ内に配置されており、段落を中央に配置するだけで済みます。

ページ上の要素の一部が div タグや他のブロック要素内にない場合は、body{text-align:center} を設定する必要があります。ただし、この設定を行うと、ページ上の他のテキストも含め、ほとんどのインライン要素が中央に配置され、デザインのニーズに合わせて調整する必要があるという問題も発生します。たとえば、本文に段落 P、段落内に画像 img とテキスト、本文に独立した画像 img を設定します。

段落pの中央揃えを実現し、段落外の画像も中央揃えにしましたが、段落内の画像はテキストの中央に揃えられました。

コード例: