Home > Developer > Web Develop
In the actual work we will also encounter the need to set vertical center of the scene, such as a lot of newspaper article title on the left and right side, often set to vertical center, for the user experience is good.
Here we also score two cases: the parent element is highly determined by the single line of text, and the parent element is highly determined by the multiline text.
2.1 Single-line text for parent element height determinationThe first kind of parent element determines the height of a single line of text, how to set it to center vertically?
parent element height-determined single-line text Vertical centering is done by setting the parent element's height and LINE-HEIGHT  Highly consistent to achieve. (Height: The altitude of the element, Line-height: As the name implies, row height (line spacing), refers to the line in the text, between lines baseline between the distance )
The difference between the calculated values of Line-height and Font-size , which becomes "line spacing " in CSS. Divided into two halves, added to the top and bottom of a text line of content, respectively.
This high line of text and block high consistency brings a disadvantage: when the length of the text content is greater than the width of the block, there is content out of the block.
The following code:
<div class= "Container" > hi,welcome! </div>
CSS code:
<style>. container{ height:100px; line-height:100px; background: #999; } </style>
There are two ways to vertically center A parent element's height-determined multiline text, picture, and so on:
Method One: Use InsertTable ( including tbody,TR,TD) labels, set vertical-align:Middle.
There is a property in the CSS for vertical centeringVertical-align,inline-block child elements of type are useful . Look at the example below:
HTML code:
<body> <table><tbody><tr><td class= "wrap" > <div> <p> See if I can center. </p> </div></td></tr></tbody></table> </body>
CSS code:
Table td{height:500px; Background: #ccc} Because the TD label defaults to vertical-align as middle by default , we don't need to set it explicitly.
Method Two:
InChromeFirefox andThe block-level elements can be set under the IE8 browser.Display forTable-cell(Set to table cell display), activates the Vertical-align property, but note that IE6,7 does not support this style , and compatibility is poor .
HTML code:
<div class= "Container" > <div> <p> See if I can center. </p> <p> See if I can center. </p> <p> See if I can center. </p> </div> </div>
CSS code:
<style>. container{ height:300px; background: #ccc; Display:table-cell; /*ie8 above and Chrome, firefox*/ vertical-align:middle; /*ie8 above and Chrome, firefox*/} </style> The advantage of this approach is that you don't have to add extraMeaningless labels, but the disadvantage is also obvious, its compatibility is not very good, incompatibleIE6,7 andThis modificationdisplay blocktable-cell.Implicitly changing the display type
One interesting phenomenon is that when you set one of the following 2 sentences for an element (regardless of what type of element was previously, Display:none):
1. Position:absolute
2. Float:left or float:right
In simple terms, as long asOne of the above two sentences appears in the HTML code, the element'sThe display type is automatically changed to disp Lay:inline-block ( blocky element ) The way it appears, Of course, you can set the element's height, and the default width does not fill the parent element.
as in the code below, Because A tag is inline elements width is not effective, but set to < Span style= "FONT-SIZE:9PT; font-family: Microsoft Ya hei, sans-serif ">position:absolute After that, it's ready.
<div class= "Container" > <a href= "#" title= "" > Enter course click here </a></div>
CSS Code
<style>.container a{ position:absolute; width:200px; Background: #ccc;} </style> Vertical centering of CSS style settings
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
