html - 是什么使得将内部文本定位在中心（垂直和水平）？

Question

我试图了解是什么让<button>标签默认将文本放置在元素的中心。水平对齐由text-align: center. 什么控制垂直对齐？

这是玩的小提琴：http: //jsfiddle.net/GW9KL/

这是 Chrome 的默认样式表<button>。看不出是什么使它垂直对齐。

Answer 1

这个问题引起了我的兴趣，所以我开始调查。长话短说，至少在 chrome 中，display: -webkit-box;它应用于按钮元素。我必须安装一个开发者插件才能看到它。我已经复制并粘贴了样式并将其应用于 div。一个 JSfiddle 显示结果

示例http://jsfiddle.net/GW9KL/2/

div {
text-align: center;
color: buttontext;
border: 2px outset buttonface;
background-color: buttonface;
font: -webkit-small-control;
-webkit-appearance: button;  
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}

Answer 2

不幸的是，没有定义<button>文本垂直对齐方式的 CSS 属性，它的处理方式因浏览器的不同而有所不同。大多数解决方案都涉及line-height或padding修复了快速和肮脏的问题，但最终似乎最好使用替代方案，例如使用 styled<div>元素。

这篇关于按钮文本的帖子对我很有帮助：提交按钮中的文本位置

这是关于该vertial-align属性的 W3C 规范，它指出它适用于“内联级和 'table-cell' 元素”：http ://www.w3.org/TR/CSS2/visudet.html

如果您正在寻找浏览器如何确定文本所在的位置，那么对此的评论是正确的。这取决于浏览器，它将隐藏在代码中并且无法操作。