html - 疑似要素を持つヘッダータグのテキストを中央揃えにする

Question

このフィドルを見てください。

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

h2タグ内のテキストを垂直方向に中央揃えにしようとしています。さまざまな高さ、パディング、位置、および行の高さで遊んでみましたが、どれもテキストを正しく配置していないようです。解決策はありますか？

Answer 1

@Shmiddty のソリューションは問題なく機能するため、これはさらに単純なコードであり、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;
}

デモ

http://jsfiddle.net/5Z9fE/

Answer 2

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

余分な span 要素を削除しました:

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