Vertically align text with css - html

Question

What is the best way to vertically center the text in my blue box?
markup:
<div class="btn-blue">
<span class="icon"></span>
Some awesome text here
</div>
and the styles:
.btn-blue {
background-color: #446598;
color: #fff;
display: inline-block;
padding: 0 20px 0 0;
line-height: 0;
}
.btn-blue .icon {
width: 50px;
height: 50px;
display: inline-block;
background-color: #00356b;
margin-right: 10px;
}
Here is the fiddle
http://jsfiddle.net/fSa6r/
Thanks.

Answer 1

Add line-height: 50px; to the .btn-blue class and
vertical-align: middle; to the icon class
FIDDLE
When only one line of text is needed, I find that setting line-height to the height of the box is the easiest way to vertically center text.

Answer 2

There are lots of ways to vertically align text, which you can check out here: http://www.vanseodesign.com/css/vertical-centering/
My personal favourite is using CSS tables (not html tables):
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

Answer 3

This is another method to show a link as a button with icon. You could to improve this code using an sprite instead two separated images:
a.mybutton {
padding: 3px 0px 3px 30px;
color: #c00;
}
a.mybutton:link,
a.mybutton:visited,
a.mybutton:active {
background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_off.png") left center no-repeat;
}
a.mybutton:hover { background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_on.png") left center no-repeat; }
Here is the: fiddle