How does CSS align the DIV layer horizontally? Today, CSS is a very tricky problem. Div itself does not define its own center attribute. Many Methods on the Internet are to use the upper-level text-align: center then nest a div layer to solve the problem. but is this method actually scientific? The following conclusions are obtained through network search and hands-on experiments: Correct settings do not affect the Page Structure: Add the following attributes to the DIV layer that needs to be horizontally centered:
Margin-left: auto; margin-Right: auto;
After such a setup, it seems that the problem has been solved. FF has already been centered, but it is still not centered in IE! After being depressed for one afternoon, I couldn't find the problem. I also compared the online articles exactly. What is the problem? Thanks to Lotte for helping us find out the cause of this evil problem. it turns out that l-blog does not add DTD before HTML by default, So Ie will explain the document in HTML instead of XHTML. the problem lies not in CSS but in the XHTML web page itself. you need to add this code to make the above settings effective: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> if you want more rigorous XHTML 1.0 strict or XHTML 1.1, see relevant documentation. the above tests are based on Windows XP SP2 IE6 and Firefox 1.0 Final version. the main style definition of how to center a div is as follows: body {text-align: center ;}# center {margin-Right: auto; margin-left: auto;} description: first, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough. However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple DIV in sequence, as long as you define margin-right in each split Div: auto; margin-left: auto.
How to align the image vertically in the DIV using the background method. Example: body {Background: URL (http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) # fff no-repeat center;} the key is the final center, which defines the position of the image. It can also be written as "top left" (upper left corner) or "bottom right", or "50 30"
How to vertically center text in a div. If it is text, you cannot use the background method. You can use the method of increasing the line spacing to implement vertical center. The complete code is as follows: <HTML>
CSS + Div control PAGE vertical element center code Global and Regional Vertical center <style type = "text/CSS" Media = screen> body {text-align: center ;} # A {width: 200px; Height: 400px; Background: #000 ;}# B {margin-top: expression (. clientHeight-50)/2); width: 50px; Height: 50px; Background: # FFF;} # c {position: absolute; left: expression (body. clientWidth-50)/2); top: expression (body. clientHeight-50)/2); width: 50px; Height: 50px; Background: # f00 ;} </style> <Div id = "A"> <Div id = "B"> </div> <Div id = "C"> </div> another method: <Div style = "Background: Blue; position: absolute; left: expression (body. clientWidth-50)/2); top: expression (body. clientHeight-50)/2); width: 50; Height: 50 "> </div>
