vertical center button

by jmjpro

HTML

<div id="containingBlock">
    <div>
        <img class="f-circle" src="http://www.whodoyou.com/images/layoutv3/f.png">
<span>This sentence will change in each example</span> 
    </div>
</div>

CSS

#containingBlock {
    display: table;
    height: 31px;
    position: relative;
    overflow: hidden;
    background-color: green;
}
#containingBlock div {
    display: table-cell;
    vertical-align: middle;
}
.f-circle {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: white;
    position: relative;
    margin-right: 6px;
    vertical-align: middle;
}