<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vertical align elements of different heights</title>
</head>
<style type="text/css">
* {margin:0;padding:0}
.outer {position:relative;display:table;height: 200px;width: 200px; vertical-align: middle; text-align: center; border: 1px solid #CCCCCC; background:#ddd; float:left}
.inner {width:100%; display:table-cell; vertical-align:bottom; position:relative;}
p{background:#f6f6f6;border:1px solid #000; font-family: verdana; font-size: 13px;}
</style>
<body>
<div class="outer">
<div class="inner">
<p>This is some random text : </p>
</div>
</div>
<div class="outer">
<div class="inner">
<p>This is some random text : This is some random text : This is some random
text : </p>
</div>
</div>
<div class="outer">
<div class="inner">
<p>This is some random text : This is some random text : This is some random
text : This is some random text : This is some random text :</p>
</div>
</div>
<div class="outer">
<div class="inner">
<p>This is some random text : This is some random text : This is some random
text : This is some random text :</p>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Vertical align elements of different heights</title>
</head>
<style type="text/css">
* {margin:0;padding:0}
.outer {position:relative;display:table;height: 200px;width: 200px; vertical-align: middle; text-align: center; border: 1px solid #CCCCCC; background:#ddd; float:left}
.inner {width:100%; display:table-cell; vertical-align:bottom; position:relative;}
p{background:#f6f6f6;border:1px solid #000; font-family: verdana; font-size: 13px;}
</style>
<body>
<div class="outer">
<div class="inner">
<p>This is some random text : </p>
</div>
</div>
<div class="outer">
<div class="inner">
<p>This is some random text : This is some random text : This is some random
text : </p>
</div>
</div>
<div class="outer">
<div class="inner">
<p>This is some random text : This is some random text : This is some random
text : This is some random text : This is some random text :</p>
</div>
</div>
<div class="outer">
<div class="inner">
<p>This is some random text : This is some random text : This is some random
text : This is some random text :</p>
</div>
</div>
</body>
</html>
