Home > Developer > JavaScript
Correct use of margin: 0 auto and body {text-align: center;} to implement element center (convert) and margintext-align
What are the similarities and differences between body {text-align: center} and margin: 0 auto?
Text-align is used to set or align the text in an object. This attribute is usually used to set text alignment.
When we set the horizontal center of an object, we usually set the Left and Right outer margins to auto.
Text-align: center is set to center some inline objects (or similar elements) such as text or img labels. Margin: 0 auto is used to set the center of block elements (or similar elements. However, the two attributes IE and FF have different understandings.
We set a paragraph P with an img label in the paragraph.
We set body {text-align: center;}. in IE, Section P and image img are both aligned in center, that is, text-align: center; it also acts on element p and element img.
In FF, Section P does not support center alignment, while the image img achieves center align, that is, text-align: center; applies to the img label, the Section p tag does not play the center role.
Let's set the section p {margin: 0 auto ;}. We found that in IE and FF, Section P achieves center alignment. Image img is not centered because it is not a target object.
There are three situations to consider:
1. Some friends confused the selector of margin: 0 auto; during operations. It should be the target object, such as div, p, rather than the body. If you set: body {margin: 0 auto;}, it will not work, unless you define the width of the body, it will change the position of the elements in the body. For example, we set the body width to 500px. If you do not set the p section, we will see that the Section is not in the top left corner of the window in the maximized window.
2. We will set the section p {text-align: center;} not to align the section itself, but to align the elements in the Section.
3. When we set the Image Tag img {margin: 0 auto;}, we made a small mistake. The img class is an inline object and cannot set the margin attribute of the image img tag, if you want to set it, first convert its attributes into block elements. The following code: img {display: block; margin: 0 auto ;}
If the elements on the page are both in the div label or other block elements and reasonably nested, we do not need to set the body {text-align: center }. You only need to set the corresponding div element margin: 0 auto. As described in the Code above, all the elements on the page are in the section p label, and you only need to center the section.
If some of the elements on the page are not in the div tag or other block elements, we need to set the body {text-align: center }. However, problems may also occur. After this setting, most of the inline elements are aligned in the center, including some other texts on the page, which must be adjusted accordingly to meet the design requirements. For example, we set a paragraph P in the body, an image img and a piece of text in the paragraph, and an independent image img exists in the body.
We have implemented the center of Section p, while also enabling the center of the picture outside the paragraph, but the picture in the paragraph is aligned with the text in the center.
For example, code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
