Vertically Aligning Content in a Floated Element
HTML
Vertically aligning content in a floated div/element.<br /><br />
<div class="floated">
<div class="inside">
<a href="#">THING</a>
</div>
</div>
<div class="floated">
<div class="inside">
<a href="#">THING</a>
</div>
</div>
<div class="floated">
<div class="inside">
<a href="#">THING</a>
</div>
</div>
CSS
body { padding:15px; }
.floated, .inside {
width:100px;
height:100px;
border:1px #ccc solid;
text-align:center;
float:left;
vertical-align:bottom;
display:table-cell;
margin-right:5px;
}
.inside {
float:none;
border:none;
}