Question

Please take a look at this fiddle.

<h2><span>Some Text</span></h2>

I’m trying to vertically center the text inside my h2 tag. I have tried playing with different heights, paddings, positions, and line-heights, but none of them seems to correctly position the text. Any solution?

Answer 1

http://jsfiddle.net/sTEmW/2/

I removed the superfluous span element:

h2 {
    color: #FFFFFF;
    font-weight: bold;
    background: none repeat scroll 0 0 #007480;

    display: inline-block;
    height: 30px;
    padding: 0 0 0 10px;
    line-height:30px;
}
h2:after {
    content: url("http://i48.tinypic.com/anh5c.png");
    display: inline-block;
    margin-left: 50px;
    width: 17px;
    float:right;
}
​