The center problem that novice encounters in CSS

The Text-align property is the horizontal alignment of the text in the specified element. Then we add a Text-align:center property to the element when we need to center the text content in an element, but when we first get to the point where we need to center all the content in an element (such as DIV1), we add it directly to Div1. Text-align:center property, this time you will find that not all elements are centered ...

For example, in the following code:

The results are as follows:

Can see the parent element div inside the child element Div seems to be centered, it is not, because my sub-element Div does not set the width of height

The review element can be seen

Now add a width to the Div,

The performance is as follows,

found that the Text-align:center attribute in the parent element Div does not take effect

Then I'll replace the element div with an inline element span to see the effect,

By examining the elements you can see that span is centered, indicating text-align:center; This property is useful not only for text, but also for inline child elements in the parent element. When you add a width-height attribute to span, it becomes impossible to center because span has become a block-level element.

Summarize the novice often encounter the center problem, let the child elements in the parent element in the horizontal center, generally with the Text-align:center attribute to specify the text and inline elements of the horizontal center, if you want to let block-level element center alignment generally use margin:0 auto;

(Note: The Text-align:center property can be centered in IE7 and in browsers with the following version of IE7, but it is not available in IE8 and above versions of browsers or other standard browsers)

The center problem that novice encounters in CSS