Correctly use margin:0 auto and body{text-align:center;} to center the element_html/css_WEB-ITnose

What are the similarities and differences between body{text-align:center} and margin:0 auto?

text-align is used to set the alignment of text in an object. Under normal circumstances, we need to use this attribute to set the text alignment

When we set the horizontal centering of an object, we often set the left and right margins to auto to achieve this

text-align:center is set to the centering of some inline objects such as text or img tags (or similar elements). margin:0 auto sets the centering of a block element (or similar element). But the understanding of these two attributes IE and FF is also different.

　We set a paragraph P, and there is an image img tag in the paragraph.
We set body{text-align:center;}. In IE, paragraph P and image img are centered at the same time. That is to say, text-align:center; acts on both element p and element img. .
In FF, the paragraph P cannot achieve center alignment, while the image img achieves center alignment. That is to say, text-align:center; acts on the img tag, but the paragraph p tag does not play a centering role.

We set the paragraph p {margin:0 auto;}. We found that paragraph P is centered in both IE and FF. Since the image img is not an action object, it will not be centered.

There are three situations that need to be explained:

1. When a friend was operating, he confused the selector of margin:0 auto;, which should be the target. Such as div, p, not body. If you set: body { margin:0 auto; } it will not achieve any effect, unless you define the width of the body, which will cause the position of the elements within the body to change. For example, we set the body width to 500px. Without any settings for the p paragraph, when we maximize the window, we will see that the paragraph is not in the upper left corner of the window.

Second, when we set the paragraph p {text-align:center;}, what we will achieve is not the alignment of the paragraph itself, but the center alignment of the elements within the paragraph.

Third, when we set the image tag img {margin:0 auto;}, we made a small mistake. img is a class of inline objects, and you cannot set the margin attribute of the image img tag. If you definitely want to To set it, first change its attributes to a block element, such as the following code: img {display:block; margin:0 auto;}

If the elements on the page are located in div tags or other Within the block element, reasonable nesting is carried out, and we do not need to set body{text-align:center}. Just set the corresponding div element margin:0 auto;. As described in the above code, the elements on the page are all located in the paragraph p tag, and you only need to center the paragraph.

If some of the elements on the page are not within div tags or other block elements, we need to set body{text-align:center}. But you will also encounter problems. After this setting, most inline elements are centered and aligned, including some other text on the page, and need to be adjusted accordingly to meet the needs of the design. For example: we set a paragraph P in the body, an image img and a text within the paragraph, and an independent image img in the body.

We have achieved the centering of the paragraph p, and at the same time, the pictures outside the paragraph have been centered, but the pictures in the paragraph are aligned with the center of the text.

For example code:

A professional CSS learning site with rich content and updated every day. We have established many QQ groups for netizens to interact, discuss and learn, and learn to develop web pages and website reconstruction that comply with WEB standards.