Shulou(Shulou.com)06/03 Report--

This article mainly explains "what are the differences between margin:0 auto and text-align:center". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the differences between margin:0 auto and text-align:center"?

Basic concepts:

1.text-align: attributes specify the horizontal alignment of text in an element

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

This property is generally used when setting text alignment. The value justify is supported.

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

Note: all browsers support the text-align attribute; no version of Internet Explorer (including IE8) supports the attribute value "inherit".

2.margin is to set the extension margin of the four sides of the object, which is called the outer patch or outer margin.

Example: div {margin: 20px 10px 30px 40px;} / / indicates the outer margin of the object, 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 tags.

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

These two attributes IE and FF are also understood differently. We set a paragraph P, and there is a picture img tag in the paragraph.

Note:

1. When setting body {text-align:center;}. In IE, paragraph P and picture img are centered at the same time, that is, text-align:center; acts on both element p and element img. In FF, paragraph P, does not achieve center alignment, while the picture img achieves center alignment, that is to say, text-align:center; acts on the img tag, while paragraph p tag does not center.

two。 When setting paragraph p {margin:0 auto;}. In both IE and FF, paragraph P is centered. The picture img is not centered because it is not the object of action.

There are three situations that need to be noted: the selector of 1.margin:0 auto; is the action object, such as div,p, not body. If you set: body {margin:0 auto;} will not achieve any effect, unless you define the width of the body, it will change the position of the elements in the body. For example, we set the width of body to 500px. Without making any settings for the p paragraph, we will maximize the window to see that the paragraph is not in the top left corner of the window. two。 Setting paragraph p {text-align:center;} is not the alignment of the paragraph itself, but the alignment of the elements within the paragraph. 3. Setting the picture tag img {margin:0 auto;} makes a small mistake. Img is an inline object, so you cannot set the margin attribute of the picture img tag. If you must, first change its attribute to a block element, such as the following code: img {display:block; margin:0 auto;}

Knowledge points: the difference between block elements and inline elements.

Thank you for your reading, these are the contents of "what are the differences between margin:0 auto and text-align:center". After the study of this article, I believe you have a deeper understanding of the difference between margin:0 auto and text-align:center, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.