Question

我想为div设置样式完全像一个按钮。我注意到当给按钮指定特定高度时，文本始终垂直居中。

到目前为止，我尝试浏览Chromium用户代理样式表，但未成功。 -webkit-appereance: button也没有解决问题。

以下是该问题的演示：https://codepen.io/franzskuffka/pen/QzqKQx。请注意，内联块样式可以确保文本垂直对齐-边框仍然很奇怪。

哪个属性可以使文本垂直居中而无需任何其他包装？这是怎么回事？

Answer 1

TL; DR：不可能使用CSS重新创建由<button>元素创建的布局。或者至少它确实隐藏得很好。

我通过将显示值更改为<button>上的flex进行了测试，它影响了垂直对齐方式。其他值，例如display:block无效。似乎没有CSS值，这只是默认行为，无法对div进行处理。

像您一样，我一直在寻找这个问题的答案。我试图找到将按钮内容垂直居中的css属性。当我差点放弃时，我决定浏览html规范，这就是我发现的内容：

如果元素是输入元素，或者它是按钮元素，并且其“显示”的计算值不是“内嵌网格”，“网格”， 'inline-flex'或'flex'，则元素的框中有一个匿名子元素按钮内容框具有以下行为：

此框是建立新的块级块容器块格式设置上下文（即“显示”为“流根”）。

如果框在水平轴上没有溢出，则为水平居中。

如果框在垂直轴上没有溢出，则为垂直居中。否则，将没有匿名按钮内容框。

https://html.spec.whatwg.org/multipage/rendering.html#button-layout

Answer 2

如果按钮的高度不固定，则可以在div中添加填充以使文本垂直居中。添加text-align: center;以使文本水平居中。

.btn {
  background-color: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
}

<div class="btn">Hello!</div>

对于具有固定高度的按钮，可能必须有一个子元素。

.parent {
  background-color: #000;
  color: #fff;
  height: 100px;
  text-align: center;
  width: 100px;
}

.child {
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent">
  <div class="child">Hello!</div>
</div>

还有其他几种方法，但是这些是我通常采用的方法。如果您想尝试更多方法：https://css-tricks.com/centering-css-complete-guide/，CSS-Tricks提供了有关以CSS为中心的完整指南。

为什么按钮中的文本始终垂直居中？

2 个答案: