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

This article introduces the relevant knowledge of "how to solve the problem that DIV can not be centered in IE". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. introduction to the horizontal layout of DIV

To center the outermost DIV horizontally in IE browsers, in addition to setting margin:0 auto for it, you generally have to set the style for body, but generally higher versions of IE browsers do not need to set this CSS style to center DIV, while lower versions of IE such as IE6 and browsers that are more strict with standards need to set text-align:center.

Sometimes inadvertently setting float:left or float:right on the outermost layer to center is also the reason why the setting margin:0 auto layout cannot be centered horizontally.

Because setting float is to let DIV float to the left or float to the right, if you want to center DIV, you definitely need to set margin:0 auto, this is a logic error, 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 browser, you can't use float at the same time, you must use the margin:0 auto style.

II. The horizontal layout of the outermost DIV box under the DIVCSS5 summary.

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

2. Set text-align:center to body to make it compatible with lower and higher versions of browsers.

3. Set margin:0 auto for the outermost DIV, which is compatible with the horizontal center style of each browser.

3. Small examples of DIVCSS5

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

This example is completed on the basis of DIVCSS5 initialization template in order to be more compatible with major browsers. It is recommended that no matter in practice or project, you can use DIVCSS5 to provide initialization template for development and production, to reduce errors and enhance CSS compatibility.

1. Complete example 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 effect

This is the end of the content of "how to solve the problem that DIV cannot be centered in IE". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.