Today, using CSS to meet a very difficult problem, the div itself does not define its own center of the property,
Online a lot of methods are introduced with the text-align:center of the superior and then nested a layer of div to solve the problem. But is it actually a science? After a web search and experiments, the following conclusions are drawn: Correct is also the settings that have no effect on page construction as follows: Add the following properties to the DIV layer that needs to be centered horizontally:
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 the Windows XP SP2 version of IE6 and the final version of Firefox 1.0.
How to center the DIV
The main styles are 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:
Description: Vertical-align:middle; indicates that the line is centered vertically, we increase the leading to the same height as the whole div, and then insert the text in the vertical center of the line-height:200px.
Css+div Control page elements vertically centered code global and area 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>
How CSS causes the div layer to be centered horizontally
