The reason analysis and solution of Div using margin:0px Auto Center

Last Update:2017-02-28 Source: Internet

Author: User

Tags requires xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

margin:0px Auto Not centered problem is really annoying, what good way to solve it? Here is a detailed introduction, there is a need for friends can refer to, I hope to help you

In general, when you center the Div, use CSS:

Copy Code code as follows:

DivX {margin:0 auto;}

This CSS in Firefox is good, but in IE does not work, the Internet to see the following reasons:

Copy Code code as follows:

<div id= "cnbruce" >margin:0 auto See Content Center </div>

As the result of debugging, IE6.0 is not centered, of course, the solution can be to the Web page subject "<body>" Declaration text center, that is

Copy Code code as follows:

<style>

Body{text-align:center}

#cnbruce {width:500px background-color: #ccc; margin:0 Auto}

</style>

<div id= "cnbruce" >margin:0 auto See content centered (with body text centered) </div>

Then, a single div css centered, not to be <body>?

Then, without the "<body>" declaration text centered, add the DOCTYPE declaration, immediately effective

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "

Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<style>

#cnbruce {width:500px background-color: #ccc; margin:0 Auto}

</style>

<div id= "cnbruce" >margin:0 auto See content centered (add DOCTYPE statement) </div>

In fact, the principle is known, because with this "lazy people" HTML debugging box, lazy to enter some forgotten things, in the end, I thought the truth is so ...
Similarly, on the "one side fixed, one side automatically extended" example, plus and without the IE effect is completely different.
The following are not added:

Copy Code code as follows:

<html xmlns= "http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>

<title>css Layout </title>

<style type= "Text/css" >



</style>

</head>

<body>

<div id= "Dv1" >

<pre> #dv1 {background-color: #3399FF; float:left;width:280px;} </pre>

</div>

<div id= "Dv2" >

<pre> #dv2 {background-color: #FFCC00; width:100%;} </pre>

</div>

</body>

</html>

The following is the addition of the DOCTYPE declaration

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "

Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns= "http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>

<title>css Layout 1</title>

<style type= "Text/css" >



</style>

</head>

<body>

<div id= "Dv1" >

<pre> #dv1 {background-color: #3399FF; float:left;width:280px;} </pre>

</div>

<div id= "Dv2" >

<pre> #dv2 {background-color: #FFCC00; width:100%;} </pre>

</div>

</body>

</html>

The next time you don't believe in the HTML debug box, or the software, hehe.

Reference Some of the DOCTYPE descriptions of the http://www.w3cn.org/article/step/2004/26.html
;

strong> What is DOCTYPE
above the code we call the DOCTYPE declaration. DOCTYPE is a shorthand for document type, which is used to indicate what version of XHTML or HTML you are using.
The DTD (for example, the XHTML1-TRANSITIONAL.DTD in the previous example) is called the document type definition, which contains the rules of the document, and the browser interprets the identity of your page based on your defined DTD and displays it.
to create compliant web pages, the DOCTYPE declaration is an essential part of the key; unless your XHTML determines a correct DOCTYPE, your logo and CSS will not work.

XHTML 1.0 provides three types of DTD declarations to choose from:
Transition (Transitional): A very loose DTD that allows you to continue using HTML4.01 's identity ( But to conform to the XHTML notation. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "

http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd >
Strict (Strict): Requires a strict DTD, you can not use any of the presentation layer of identity and attributes, such as <br>. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD" >
Framework (Frameset): A DTD specifically designed for frames page design, if your page contains frames, you need to use this DTD. The complete code is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd xhtmL 1.0 frameset//en "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

What kind of doctype do we choose?
Ideally, of course, a strict DTD, but for most of our new designers, the transition DTD (XHTML 1.0 Transitional) is the ideal choice (including the site and the transition DTD). Because the DTD also allows us to use the identity, elements, and attributes of the presentation layer, it is also easier to pass the code checksum of the consortium.
Note: The "presentation layer identification, attributes" above refers to those tags that are used solely to control performance, such as tables for typesetting, background color labels, and so on. The identity in XHTML is used to represent structs, not to implement representations, and the purpose of our transition is to ultimately achieve separation of data and performance.
For example: Body models change clothes. Models are like data, clothes are representations, models and clothes are separate, so you can change clothes at will. The original HTML4, the data and performance is mixed together, it is very difficult to change the form of a one-time. Oh, a little abstract, this concept requires us to gradually understand in the application process.
Add: The DOCTYPE declaration must be placed at the top of every XHTML document, above all code and logo.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More