The height of the parent element determines the vertical centering of multiple lines of text, pictures, and blocky elements in two ways:
Method One: Write the contents into the TD label in table(including TBODY, TR, TD) and set the Vertical-align:middle.
Property vertical-align in CSS will only take effect if the parent element is TD or TH. For example:
<Body><Table><tbody><TR><TDclass= "box"><Div> <P>I'm vertically centered.</P> <P>I'm vertically centered.</P> <P>I'm vertically centered.</P> <P>I'm vertically centered.</P> <P>I'm vertically centered.</P></Div></TD></TR></tbody></Table></Body>
Css:
Table TD {height:300px; background:#000}Method Two:
HTML code:
Add Display:table-cell and Vertical-align:middle to the parent container;
<Divclass= "Div1"> <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>
CSS code:
<style>.div{ height:400px; Background: #eee; Display:table-cell; Vertical-align:middle;} </style>
Multiline text vertically centered div height ok
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
