1. Use CSS to center the DIV layer horizontally
Add the following attributes to the DIV layer to be horizontally centered:
Margin-left: auto;
Margin-Right: auto;
In this way, FF has been centered, but it is still not centered in IE!
The problem lies not in CSS but in the XHTML web page itself.
This code must be added 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">
How to center a div
The main style definition is as follows:
Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note:
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 ;"
It should be noted that, 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 divs in sequence, only
Define margin-Right: auto; margin-left: auto; in each split Div.
How to vertically center an image in a div
Use the background method. Example:
Body {Background: URL (http://www.w3cn.org/style/001/logo_w...) # fffno-repeatcenter ;}
The key is the final center. This parameter defines the image position. 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 change the vertical center. The complete code is as follows:
<HTML>
<Head>
<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>
</Head>
<Body>
<Div id = "center"> <p> test content </P> </div>
</Body>
</Html>
Note:
Vertical-align: middle; indicates vertical center in the row. We will increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center.
CSS + Div control page element vertical center code global and region vertical center
<Style type = "text/CSS" Media = screen>
Body
{
Text-align: center;
}
#
{
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>
***************************************
2. Use js to center the Layer
Add the following code to the <body> area:
<Div id = L1 style = "height: pixel PX; left: 341px; position: absolute; top: 585px; width: 205px; Z-INDEX: 1">
<Table bgcolor = # ffffff border = 1 bordercolordark = # ffffff bordercolorlight = #000000 cellpadding = 0 cellspacing = 0 width = "100%">
<Tr>
<TD Height = 1 width = 178> □:: best4u Forum ::</TD>
<TD align = middle onclick = "l1.style. Visibility = 'ddden '"
Style = "cursor: Hand" width = 21> cursor </TD> </tr>
<Tr valign = top>
<TD colspan = 2
Height = 91> welcome to this site! <Br> domain name of this site: <br> http://webform.cn
</TD> </tr> </table> </div>
<Script language = "JavaScript">
Function moveit () // This function is used to place the layer in the middle of the browser
{
L1.style. Left = (document. Body. offsetwidth-parsefloat (l1.style. width)/2) + document. Body. scrollleft;
L1.style. Top = (document. Body. offsetheight-parsefloat (l1.style. Height)/2) + document. Body. scrolltop;
}
Window. onload = moveit; // when the network is opened, execute moveit ()
Window. onresize = moveit; // when the browser size is adjusted, execute moveit ()
Window. onscroll = moveit; // execute moveit () when pulling the scroll bar ()
</SCRIPT>
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
