Question

请查看this fiddle。

<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/

在具有伪元素的标头标记上居中文本

2 个答案: