Instance
| The code is as follows: | Copy code |
<Style type = "text/css"> Html code
Example 2 |
|
<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.
Another solution
The following shows the style for the div to display in the middle of the browser:
| The code is as follows: | Copy code |
<Style type = "text/css"> |
|
I believe that the last thing you do not understand is that when you do not set this property in the property margin:-150px 0 0-100, the x coordinate of this div is 50% of the content display part, the y coordinate is 50% of the content display. However, in this case, we can only say that the starting point of the div is in the center. What we need is to display the entire div in the center, therefore, to margin-left:-150px; (here, 150 is obtained from the width attribute and it is equal to half of width, the corresponding margin-top method is also obtained through the sample method .) In this way, the width of the entire div is divided into half to the left to center horizontally. In the same way, set margin-top:-100px, the height of the entire div is displayed in half. The entire div is displayed in the middle of the browser.
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
