Centering text on a header tag that has pseudo element

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;
}
​

Answer 2

As the solution from @Shmiddty works fine, this is an even simpler code and it works in all browsers, even IE7:

HTML

<h2>Our History</h2>​

CSS

h2 {
    display: inline-block;
    padding: 0 67px 0 10px;
    background: #007480 url(http://i48.tinypic.com/anh5c.png) no-repeat right 0;
    font-weight: bold;
    line-height: 30px;
    color: #fff;
}

Demo

http://jsfiddle.net/5Z9fE/