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;
}
This entry was posted in Blog and tagged , .

One Response to Vertically Aligning Content in a Floated Element

November 18th, 2014
labo says:

maybe more understandable this way :

.floated {
border:1px #ccc solid;
float:left;
margin-right:5px;
}
.inside {
width:100px;
height:100px;
display:table-cell;
vertical-align:middle;
text-align:center;
}

Reply

Leave a Reply

*

*

TOP