css - 当容器小于行高时如何垂直对齐文本？

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>