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

Question

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

进行另一项测试，但使用不同的字体大小(12 像素)有效。

我该如何解决这个问题以及为什么会发生这种情况？

更大的字体大小: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;
}

谢谢!

Answer 1

一切实际上都按预期工作。看看这个以供引用:http://jsfiddle.net/2sLNy/9/

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

尝试使用一种图标字体，如 font awesome并使用以下内容属性:

content: "\f067";

编辑: 不理想，但这就是 fontawesome 的样子:http://jsfiddle.net/2sLNy/13/