Vertically Aligning Content in a Floated Element

by Drath

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:middle;
    display:table-cell;  
    margin-right:5px;
}

.inside { 
    float:none;
    border:none;
}