我想完全重置一个button的继承CSS，因此它的行为与任何其他行内块元素完全相同。但是，我遇到了一个问题，即一个按钮的文本永远卡在垂直居中。CSS <button>重置：垂直标签位置？

在小提琴（和截图）以下时，button和div有完全相同的样式根据Chrome开发者控制台，但按钮的文本是垂直居中，而div的是不是：

button vs div

任何人都知道属性或选择将完全复位按钮，具体包括它的标签位置？

回答

有一个在Chrome以外的其他任何浏览器〜25没办法。我联系了Chromium项目，了解它在Chrome 27中无法使用（请参阅@winterblood answer &注释）。他们这样说：

问题是我们现在在按钮内部的匿名块上使用margin：auto来执行按钮内部的居中以获得安全居中。所以，不幸的是，没有办法从CSS设计它。您之前能够控制此行为是真正实现细节泄漏。

所以，真正的答案是，你不能在任何浏览器样式此，除了铬〜25，其中-webkit-box-align不慎暴露，如@winterblood回答。

来源

2013-03-25 rgthree

对于webkit，您需要覆盖值为baseline或start的-webkit-box-align。

我还没有运气在Firefox中实现这一点（从一个非常简短的看）。

来源

2013-03-25 22:46:46

'-moz-box-align：baseline;'应该在Firefox中做到这一点。您也可能想为符合CSS3的浏览器添加标准的'box-align：baseline;'。 – clav 2013-03-25 22:51:51

不幸的是，这是行不通的。首先，我将'display'重写为'inline-block'，它将删除'display：-webkit-box'功能。其次，至少在Chrome 27 dev中，即使设置'box-align'属性也不会影响标签的位置（当设置'display：-webkit-box'时，它会影响'div'。也许这是一个错误。我已经对小提琴进行了版本管理，以显示它不起作用（至少在Chrome 27中）：http://jsfiddle.net/rgthree/vT3a7/5/ – rgthree 2013-03-25 22:56:01

@clav'-mox-box-align：baseline'或'：开始'不适合我在jsFiddle。 @rgthree'-webkit-box-align：baseline'对我来说很适合用'display：inline-block'（在Chrome 25中） – 2013-03-25 23:00:38

CSS <button>重置：垂直标签位置？

回答

回答

相关问题