Home > Developer > Web Develop
1. Vertical center of single row determined by parent element
This is achieved by setting the height of the parent element and Line-height.
2, the parent element determines the multiline vertical center
There are two ways to align the height of a parent element with multiple lines of text, a picture, and a block element vertically:
2.1. Vertical-aligh method: Use the Insert table (including TBODY, TR, TD) label, and set the Vertical-align:middle.
When it comes to vertical centering, the CSS has a property vertical-align for vertical centering, but this style only takes effect if the parent element is TD or TH. So we have to insert the table tag again.
<BODY><TABLE><TBODY><TR><TD class= "wrap" ><div> <p> See if I can center. </p> <p> See if I can center. </p> <p> See if I can center. </p> <p> See if I can center. </p> <p> See if I can center. </p></div></td></tr></tbody></table></body>
Because TD tags default to Vertical-align as middle by default, you do not need to set them explicitly.
2.2. Activate the Vertical-align attribute method:
In Chrome, Firefox and IE8 above the browser can be set block-level element display for Table-cell, activating vertical-align properties, but note IE6, 7 does not support this style.
<style>.container{ height:300px; Background: #ccc; Display:table-cell;/*ie8 above and Chrome, firefox*/ vertical-align:middle;/*ie8 above and Chrome, firefox*/}</style> <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> <p> See if I can center. </p> <p> See if I can center. </p> </div></div>3, Hidden change element display value
Set one of the following 2 sentences for the element, regardless of what type of element was previously, except Display:none:
The element automatically becomes display:inline-block, and of course you can set the width and height of the element and the default width does not fill the parent element.
CSS Tips--Vertical centering
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
