javascript - anchor 和按钮内的垂直定位

Question

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}

button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

我们的元素中有带有图标的按钮，这些按钮根据 Prop 呈现为按钮或 anchor 。我们偶然发现了按钮内容未对齐的问题。在代码片段中有示例。

为什么内部 div 在按钮和 anchor 中对齐不同？如何正确垂直对齐按钮的内容？我本可以添加 padding-top 但它似乎不正确。

Answer 1

恐怕您没有自然预期行为的原因是在 button 中包含 div 不是有效的 HTML(根据 HTML5) >。这意味着每个浏览器可能有不同的呈现方式。

如您所说，您可以通过填充或轻松定位来解决问题，使其按您的需要工作，但它仍然不是有效的 HTML。一种可能的解决方法是重置 anchor 标记上的填充(以覆盖默认样式)和垂直居中内容(不依赖于元素本身的高度)。 https://jsfiddle.net/ne037nL7/

按钮只能包含phrasing content，不仅包括纯文本，还包括span、i等(完整列表在这里https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content ).

来源:W3 https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element