如何在容器小于行高时垂直对齐文本

Question

我有一个小div(26 x 26px)，想添加一个字体大小为30px的字符。我希望在框中垂直对齐此文本。但是，即使在设置了line-height和vertical-align属性之后，我也无法将文本提升到容器的中心。

有没有一种简单的方法可以做到这一点，或者我需要求助于嵌套的div 和转换？

.zoom button {
width: 26px;
height: 26px;
border: 1px solid #bcbcbc;
padding: 0;
font-size: 30px;
/** these don't see to help **/
line-height: 26px;
vertical-align: middle;
}

<div class="zoom">
<button>-</button>
<button>+</button>
</div>

Answer 1

问题出在减号上。您可以考虑一个伪元素来修复它，您将在其中应用vertical-align并调整其line-height.

请注意，line-height:0将完成按钮元素的工作，因为默认情况下内容在中心对齐。我还添加了vertical-align: top以避免按钮之间的错位

.zoom button {
width: 26px;
height: 26px;
border: 1px solid #bcbcbc;
padding: 0;
font-size: 30px;
line-height: 0;
vertical-align: top;
}
.zoom button:first-child::before {
content: "";
vertical-align: middle;
line-height: 20px; /*any value between 17px and 24px will do the job (don't ask me why ...)*/
}

<div class="zoom">
<button>-</button>
<button>+</button>
</div>

Answer 2

在我看来，最简单的方法是将文本包装在一个inline-block框中，从中将font-size和line-height设置为字体大小的三分之二左右(对于这些字符)，按钮将自己居中。

伪选项也有效。 看@Temani 阿菲夫答案

.zoom button {
width: 26px;
height: 26px;
border: 1px solid #bcbcbc;
padding: 0;
}
.zoom.bis button {
width: 46px;
height: 46px;
text-align: center;
/* just for info */
}
.zoom.ter button span {
font-size: 40px;
}
.zoom button span {
font-size: 30px;
line-height: 0.66em;/* or 20px .. a third */
}
.zoom {
margin: 1em;
float: left;
}

<div class="zoom">
<button><span>-</span></button>
<button><span>+</span></button>
</div>
<div class="zoom bis">
<button><span>-</span></button>
<button><span>+</span></button>
</div>
<div class="zoom bis ter">
<button><span>-</span></button>
<button><span>+</span></button>
</div>

Answer 3

它必须与"+"字符做一些事情，所有其他字符都正确显示。尝试：

.zoom button {
width: 26px;
height: 26px;
border: 1px solid #bcbcbc;
padding: 0;
font-size: 30px;
line-height: 30px;
}

.plus, .minus {
position: relative;
top: -4px;
}

<div class="zoom">
<button><span class="minus">-</span></button>
<button><span class="plus">+</span></button>
</div>