How to center the div layer horizontally with CSS
These two days began to make bold page changes to the blog.
Today, a very difficult question, the div itself does not define its own center attribute,
Many methods on the Internet are introduced using superior text-align:center and then nesting a layer of div to solve the problem.
But is it actually such a method of science?
After the network search and personal experiment came to the following conclusions:
The correct settings that have no effect on the page structure are 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 setup problem seems to be resolved, in the FF has been centered, but in IE see unexpectedly still not centered!
Depressed for an afternoon, is to find no problems, but also specifically compared to the online article is exactly the same.
What exactly is the problem?
Thanks to friends Lotte useless help to find out the cause of this weird problem.
It turns out that L-blog doesn't have a DTD in front of HTML by default, so IE interprets the document in HTML instead of XHTML.
The problem is not in CSS but in the XHTML page itself.
You need to add such a code to make the above settings effective:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" [/code] ' target=_blank>http://www.w3.org/TR/ Xhtml1/dtd/xhtml1-transitional.dtd ">[/code]
Consult the documentation if you want more stringent XHTML 1.0 Strict or XHTML 1.1.
These tests are based on the Windows XP SP2 version IE6 and Firefox 1.0 final version.
How do I make a div centered
The main style definitions are as follows:
[Code]body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }
Description
First, the parent element defines text-align:center, which means that the content within the parent element is centered, and for IE this setting is OK. But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”
It should be explained that if you want to use this method to make the whole page centered, it is recommended not to set in a Div, you can split out multiple div, only
To define Margin-right:auto in each div that is pulled out; Margin-left:auto; It's OK.
How do I get a picture centered vertically in a div
Use the background method. Example:
| Body{background:url (200777211224395.gif) #FFF no-repeat Center; |
The key is the final center, which defines the location of the picture. It can also be written as "top left" or "bottom right", or you can write the value "50 30" directly.
How do I align text vertically in a div
The result is the text, you can not use the background method, the way to increase the line spacing to achieve vertical center, complete code as follows:
<style>
Body{text-align:center;}
#center {Margin-right:auto;
Margin-left:auto;
height:200px;
Background: #F00;
width:400px;
Vertical-align:middle;
line-height:200px;
}
</style>
<body>
<div id= "center" ><p>test content</p></div>
</body>
Description
Vertical-align:middle indicates that the line is centered vertically, we increase the spacing to be as high as the entire Div line-height:200px, and then insert the text and center it vertically.
Css+div Control page Elements Vertically center code global and area vertically
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
