Question

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

进行另一项测试，但使用不同的字体大小（12px）。

我该如何解决这个问题以及为什么会这样？

更大的字体代码：

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/

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

1 个答案: