Go CSS Web page layout: The various methods of div horizontal centering

Http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html

page layouts in Web standards are implemented using DIV mates with CSS. This is the most commonly used to make the entire page horizontally centered effect, which is in the page layout of the basic, but also the most should master the knowledge. However, there are often people asking this question, here I briefly summarize the use of Div and CSS to achieve Horizontal Center page method:

First, Margin:auto 0 and Text-aligh:center

• The above code means that the distance from the wrap div to the left and right sides is set automatically, up and down to 0 (can be any). Run your current code in a modern browser (such as Internet Explorer 7, Firefox, opera, and so on):

• <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
      <title> New Document </TITLE>
    <meta http-equiv= "Content-type" content= "text/html; charset=utf-8"/>
    <style type= "Text/css",
    div#wrap {
   width:760px;
   margin:0 Auto;
   border:1px solid #333;
   
   }
    </style>
      <div id= " Wrap "
    The horizontal center of the page elements in modern browser settings such as Firefox, as long as you specify margin:0 auto;
    <pre>
      Div #wrap {
   width:760px;
   margin:0 Auto; /* 0 of this can be any value */
   border:1px solid #ccc;
   background-color: #999;
   }
  </pre>
    </div>
   </body>
  

• The top effect is very good. But this is not working in Internet Explorer 6 and the corrected version, but fortunately it has its own solution. In Internet Explorer, the Text-align property is inheritable, that is, set in the parent element and has the property by default in the child element. So we can set the Text-align property value to center in the body tag so that all the elements in the page are automatically centered, and we need to add a hook to turn the text on the page into the way we are accustomed to reading--left-aligned. So we're going to write code like this:

• body {text-align:center;}
  #wrap {text-align:left;}

• This makes it easy to align the Div's center in Internet Explorer. So to show the center effect in all browsers, we can write our code like this:

• body {text-align:center;}
  #wrap {text-align:left;
  margin:0 Auto;
  }

• <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.huaanzn.com/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
  <title> Css+div to achieve horizontal center-aligned page layouts </title>
  <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
  <style type= "Text/css" >
  body {text-align:center;}
  Div#wrap {
  Text-align:left;
  width:760px;
  margin:0 Auto;
  border:1px solid #333;
  
  }
  </style>
  <div id= "Wrap" >
  In Firefox and other modern browser settings page elements of the horizontal center, as long as you specify margin:0 auto;
  <pre>
  Div#wrap {
  width:760px;
  margin:0 Auto; /* The 0 here can be any value */
  border:1px solid #ccc;
  Background-color: #999;
  In Internet Explorer 6 and below, we will also make the following settings:
  body {text-align:center;} div#wrap {
  Text-align:left;
  }
  </pre>
  </div>
  </body>
  

• But here is a premise, is to set the center of the element to have a fixed width, for example, here we set the 760 pixels.

Second, relative positioning and negative margin

• Relative positioning is performed for wrap, and the offset is offset using a negative margin. This method is relatively simple and easy to implement:

• #wrap {
  position:relative;
  width:760px;
  left:50%;
  margin-left:-380px
  }

• This code means that the positioning of wrap is relative to the body tag of its parent element, and then moves its left border to the positive middle of the page (that is, the left:50% implication), and finally we move from the middle position to the left half of the distance, so that the horizontal center is achieved.

• <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
      <title> css+ Div to achieve Horizontal center-aligned page layout </title>
    <meta http-equiv= "Content-type" content= "text/html; charset=utf-8"/
    <style type= "text/css";
    Div#wrap {
   position:relative;
   width:760px;
   left:50%;
   margin-left:-380px;
   border:1px solid #333;
   
   }
    </style>
      <div id= " Wrap "
    methods that are valid in all browsers:
    <pre>
      div#wrap {
   position: Relative
   width:760px;
   left:50%;
   margin-left:-380px;
   border:1px solid #333;
   background-color: #ccc;
   }</pre>
    </div>
   </body>
  

• Similarly, you need to set a fixed width before setting the horizontal center.

• P.s. Which method to choose?

• Which of the above two methods is the best way to choose? In the first method seems to use the hack technology, actually does not, it is the standard of the web standards, fully conform to the specification, therefore, two kinds of methods can be arbitrarily selected any one of them to use, they do not exist CSS hack problems.

Third, the other center way

• The above is the implementation of horizontal centering with the specific width set. Sometimes we want to make a flexible layout, or when an element is in a container we just want to center it and don't want to set a specific width. In fact, this is not really the center layout, like for a 100%-length element, you say it is centered or left-aligned? So all the not-so-high-width centers are not really centered. Such a design we are using like elements of the padding to set, in fact, we are changing the parent element of the container size:

• If we want the wrap element to change in length with the window and remain centered, we can write:

• Body {
  padding:10px 150px;
  }
  
  Here, we just need to keep the parent element's padding on the left and right sides equal.

• <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.huaanzn.com/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
  <title> Flexible Center layout that changes with the size of the browser window </title>
  <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
  <style type= "Text/css" >
  Body {
  padding:10px 150px;
  }
  Div#wrap {
  border:1px solid #333;
  
  }
  </style>
  <div id= "Wrap" >
  A resilient center layout that changes with the size of the browser window:
  <pre>
  Body {
  padding:10px 150px;
  Here, we just need to keep the parent element's padding on the left and right sides equal.
  </pre>
  </div>
  </body>
  

Go CSS Web page layout: The various methods of div horizontal centering