CSS how to make div layer Horizontal center today with CSS encountered a very difficult problem, div itself does not define its own center of the property, many methods on the Web are introduced with the superior text-align:center and then nested a layer of div to solve the problem. But is it actually scientific? The following conclusions have been drawn through web search and experimentation: the right thing to do is to have no effect on page construction as follows: Add the following properties to the DIV layer that needs to be horizontally centered:
Margin-left:auto;margin-right:auto;
After such a set of problems seems to solve the problem, in the FF has been centered, but in IE still has no center! Depressed an afternoon, is to find no problem, but also specifically compared the article on the Internet exactly the same. Where is the problem? Thank the Netizen Lotte useless help to find out the cause of this evil problem. It's l-blog. The default is not to add a DTD to HTML, IE then interprets the document in HTML rather than XHTML. The problem is not in CSS but in the XHTML Web page itself. This code is required to make the above settings work: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> If you want more stringent XHTML 1.0 Strict or XHTML 1.1, consult the documentation. The above tests are based on Windows XP SP2 version IE6 and Firefox 1.0 final. How to center the div in the main style is defined as follows: body { Text-align:center;} #center {Margin-right:auto; Margin-left:auto; }
Description: The text-align:center is defined first in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available. But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; "What needs to be explained is that if you want to use this method to make the whole page to center, it is recommended not to set in a div, you can sequentially split multiple div, as long as in each split div defined margin-right:auto; Margin-left:auto; You can do it.
How to make a picture vertically centered in a 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 picture. It can also be written as "top left" or "bottom right", or write the value "50 30".
How to make the text in the DIV vertical Center If it is text, you can not use the background method, you may use the method of increasing line spacing to achieve the vertical center, the complete code is as follows:
Css+div controls the elements in the page vertically centered code global and regional vertically centered <style type= "Text/css" media=screen>body{text-align:center;} #a {width:200px;height:400px;background: #000;} #b {margin-top:expression (a.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><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> Source: http://www.cnblogs.com/DebugLZQ/archive/2011/08 /09/2132381.html
How to center div in CSS (reprint)
