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

This article mainly explains "how to solve the problem that DIV can not be centered in IE". The content of the explanation 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 "how to solve the problem that DIV can not be centered in IE".

I. introduction of DIV level organization in the middle

Let the outermost DIV center in the IE reader, in addition to setting margin:0 auto for it, it is also usual to set equipment tricks for body, but as usual, high-version IE browsers do not need to configure this CSS style can also make DIV center, the lower version of IE is like IE6 and the standard compared to strict readers need to configure text-align:center.

Sometimes inadvertently to the center of the outermost equipment equipment float:left or float:right is also the reason why the configuration margin:0 auto layout can not be centered.

Because the configuration of float is to let DIV float to the left or float to the right, it is necessary to set margin:0 auto if you want to center DIV. At this time, it is a logical fault, that is, to let DIV keep left or right, and center, this is an obvious logic error. So to center the outermost DIV horizontally in the reader, you cannot use float at the same time, and the margin:0 auto pattern must be applied.

II. CSS5 summed up the premise that the outermost DIV box leveling mechanism is in the middle.

1. Float cannot be used (neither float:left nor float:right can be used)

2. Configure text-align:center for body to be compatible with low-version and high-version readers

3. Configure margin:0 auto for the outermost DIV, which is compatible with the central style of each major dabbler.

3. Small examples of CSS5

If the CSS class of the outermost DIV is named "main", in order to see the center effect, configure the box with css wide 300px, css high 100px, red border, so that it is centered.

This example is based on the CSS5 initialization template to make it more compatible with major readers. It is advocated that regardless of reality or business as usual, everyone can use the CSS5 supply initialization template root to offset the pioneering production, reduce errors and enhance CSS compatibility.

1. Incomplete instance DIV+CSS code

1), key CSS code

Body {text-align:center} .main {margin:0 auto; width:300px; height:100px; border:1px solid # F00}

2), key HTML code

It is easy to fill in DIVCSS instance content

2. Screenshot of achievement

Thank you for your reading, the above is the content of "how to solve the problem that DIV can not be centered in IE". After the study of this article, I believe you have a deeper understanding of how DIV can not be centered in IE to solve this problem. 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.