html - 在具有伪元素的标题标签上居中文本

Question

请看看这个小提琴。

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

我正在尝试将h2标签内的文本垂直居中。我尝试过使用不同的高度、填充、位置和行高，但它们似乎都没有正确定位文本。有什么解决办法吗？

Answer 1

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

Answer 2

由于@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/