We can vertical align the content of inside a <div> by the following CSS.
v-align-div { display: table-cell; vertical-align: middle; }
Here is a simple HTML example which demonstrates the vertical alignment.
<html> <head> <style type="text/css"> .blue { background-color: blue; } .green { background-color: green; } .red { background-color: red; } .v-align-div { color: white; text-align: center; width: 160px; height:120px; display: table-cell; vertical-align: middle; } </style> </head> <body> <div id="main"> <div class="v-align-div blue">Hello World</div> <div class="v-align-div green">Hello<br/>World</div> <div class="v-align-div red"><a href="http://eureka.ykyuen.info">Visit<br/>my<br/>blog</a></div> </div> </body> </html>
Please note that the above method does not work in Internet Explorer 7 or below and you can find more solutions suggested by YIJEN in the reference link below.
Done =)
Reference: CSS Vertical Align(用純CSS解決div垂直置中)
Reblogged this on hetalj and commented:
Vertical Alignment Tips
LikeLike