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>我们的项目中有带有图标的按钮，它们根据道具呈现为按钮或锚点。我们偶然发现了按钮内容未对齐的问题。在代码片段中有示例。
为什么div按钮和锚点的内部对齐方式不同？如何正确垂直对齐按钮的内容？我本来可以添加的，padding-top但似乎不对。
恐怕您没有自然预期行为的原因是div在button. 这意味着每个浏览器可能有不同的呈现方式。
正如您所说，您可以轻松地使用填充或定位来解决方法，使其按您的意愿工作，但它仍然不是有效的 HTML。一个可能的解决方案是在锚标记上重置填充（以覆盖默认样式）和垂直居中内容（不依赖于元素本身的高度）。https://jsfiddle.net/ne037nL7/
该按钮只能包含段落式内容不仅包括纯文本，而且span，i和更多（这里充分名单https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing -内容）。
来源：W3 https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句