1

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

进行另一个测试，但使用不同的字体大小（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;
}

谢谢！

4

1 回答 1

2

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

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

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

content: "\f067";

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

于 2013-11-14T19:34:46.173 回答