Question

我真的需要帮助：已经让我第二天破解了。我有以下代码：

* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}

.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}

.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}

.plus:before {
content: "+";
}

<div class='inlbtn'><span class='plus'></span></div>

它基本上有一个div和span，里面有一个“+”符号。水平对齐似乎很好，但垂直方向稍微向下移动。如何使它完全垂直居中？

我玩了代码，似乎*下的代码是罪魁祸首，但为什么呢？

这是小提琴http://jsfiddle.net/jk34josq/2/

Answer 1

你做的一切都是正确的，我总是使用相同的方法。问题是这一行

content: "+";

是一段文字，因此它自动在大写字母保留的line-height内有上边距（+符号不是一个）;边际值也可能因字体而异。

作为证据，请尝试以下方法：

content: "A";

这看起来很集中。

您可以采取哪些措施来避免此行为：

负边距/顶级属性
使用图片而不是文字
也许玩减少line-height属性，但我对此方法有疑问

Answer 2

我只使用一个HTML元素，因为不需要使用额外的元素，也不需要使用:before伪类：

<div class='inlbtn'>+</div>

然后我会使用display: inline-block而不是表格。

正如Simon在回答中所提到的，+字符小于A。但是我不会使用负边距或填充，而是改变行高：

.inlbtn {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #666;
    border: 1px solid #939393;
}

Updated Fiddle

Answer 3

请尝试以下操作： Demo

.inlbtn {
    width: 2rem;
    height: 2rem;
    display: block;
    text-align: center;
    font-weight: bold;
    color: #666;
    border: 1px solid #939393;
}
.plus {
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle !important;
}
.plus:before {
    content:"+";
    display: inline-block;
}

div内文本的垂直对齐方式

3 个答案: