Vertically Aligning Content in a Floated Element

August 26th, 2012

Vertical alignment is a pretty weird thing. It usually only works within table elements depending on the browser. It’s even harder to get working when you are using floats. There’s a cool work-around that is available at your disposal if you do need to use vertical alignment.

Demo

Code

HTML

<div class="floated">
    <div class="inside">
        <a href="#">THING</a>
    </div>
</div>

CSS

.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;
    margin:0;
}