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, you only need to 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 (yun_qi_img/logo_w3cn_194x79.gif) # FFF no-repeat center ;}
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"
The effect is as follows:
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:
The code is as follows: |
Copy code |
<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.