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