html - 为什么此字体较大的文本不符合行高？

我正在尝试将div中的文本垂直对齐100px x 100px。问题是，当我将其字体大小设置为更大时，它不考虑行高。

进行另一个测试，但使用不同的font-size（12px）可以工作。

我该如何解决？为什么会这样？

较大的字体：http://jsfiddle.net/2sLNy/1/

小字体：http://jsfiddle.net/2sLNy/2/

较大的字体大小代码：

div{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #DDD;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
}

div:hover:before{
    opacity: 1;
}

div:before{
    opacity: 0;
    position: absolute;
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
    font-size: 12px;
    color: #FFF;
    content: " + ";
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    line-height: 100px;
}

谢谢！

最佳答案

一切实际上都按预期进行。看一下以供参考：http://jsfiddle.net/2sLNy/9/

+自然位于相对于所有其他字母较低的位置。它有一个偏移量。您应该在jsfiddle中看到它。较小时看起来不错的原因是，很小，您看不到偏移量，而文本较大。

尝试使用像font awesome这样的图标字体之一，并使用以下content属性：

content: "\f067";

编辑：不理想，但这是它与fontawesome的外观：http://jsfiddle.net/2sLNy/13/

关于html - 为什么此字体较大的文本不符合行高？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19986026/