Question

我无法将文字放在框中垂直居中。现在，它的坐位太低了。

.box {
position:relative;
vertical-align: middle;
color: #0b7;
display: inline-block;
height: 15px;
line-height: 20px;
text-align: center;
transition: 0.5s;
padding: 5px;
cursor: pointer;
border: 1px solid #0b7;
-webkit-transition:0.5s;
}

Answer 1

如果是单行文本，您应该尝试line-height，修复高度为div

.box {
position:relative;
color: #0b7;
display: inline-block;
height: 40px; // changed
line-height: 40px; // changed
text-align: center;
transition: 0.5s;
padding: 5px; //removed
cursor: pointer;
border: 1px solid #0b7;
-webkit-transition:0.5s;
}

fiddle

编辑：

如果您仍想向左右添加padding，请添加

padding: 0 5px;

Answer 2

将line-height更改为15px。这适用于单行。

Answer 3

我认为您应该将“高度”更改为自动并删除“行高”或将“高度”更改为等于“ line-height ”

Answer 4

在框中使用display:inline。

.box {
    position:relative;
    vertical-align: middle;
    color: #0b7;
    display: inline;
    height: 15px;
    line-height: 20px;
    text-align: center;
    transition: 0.5s;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #0b7;
    -webkit-transition:0.5s;
}

https://jsfiddle.net/r5jt8uu0/

无法让文字垂直居中

4 个答案: