Margin: 0 auto and text-align: the difference between the center, margintext-align

Margin: 0 auto and text-align: Difference Between center (reprinted), margintext-align

From: http://www.cnblogs.com/zhwl/p/3529473.html

Basic concepts:

1. text-align: attribute specifies the horizontal alignment of text in the element;

This attribute sets the horizontal alignment of text in block-level elements by specifying the point to which the row box is aligned;

This attribute is generally used when text alignment is set. Value justify is supported.

Example: div {text-align: left;} // align the text to the left

Note: all browsers support the text-align attribute. Internet Explorer (including IE8) in any version does not support the attribute value "inherit ".

2. margin is an extension margin for setting the four sides of an object. It is called an outer patch or an outer margin.

Example: div {margin: 20px 10px 30px 40px;} // indicates the object margin, top 20px, right 10px, bottom 30px, left 40px

The differences are as follows:

1. text-align: center sets the center of some inline objects (or similar elements) such as text or img labels.

2. margin: 0 auto sets the center of block elements (or similar elements.

The two attributes, IE and FF, have different understandings.Let's set a paragraphP, There is an image in the paragraphImgLabel.　　

Note:

1. When setting body {text-align: center ;}. In IE, paragraph P and image img are both centered and aligned, that is, text-align: center, and act 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.

2. When paragraph p {margin: 0 auto;} is set ;}. 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 note: 1. margin: 0 auto; the selector is 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. Set the section p {text-align: center;} not to align the section itself, but to align the elements in the Section. 3. setting the Image Tag img {margin: 0 auto;} makes a small mistake. img is an inline object and cannot set the margin attribute of the image's img tag, first, convert its attribute into a block element, as shown in the code below: img {display: block; margin: 0 auto ;}

Knowledge Point: The difference between block elements and inline elements.

Margin: 0 auto and text-align: What is the difference between center ??

Margin: 0 auto; is used to center itself in the browser, and must be used with the width:
<Div stley = "width: 500px; height: 200px; border: 1px solid #000000; margin: 0 auto;"> Use margin: 0 auto; do not set float: left and right, otherwise it will be invalid </div> text-align: center; is used to center the label content:
<Div stley = "width: 500px; height: 200px; border: 1px solid #000000; margin: 0 auto; text-align: center;"> use text-align: center; the content in this div is centered </div>

Help css problems text-align and margin: auto 0

A simple answer: margin: auto 0 is used to locate the center of the DIV box.
Text-align is used to center the content in the DIV.