为什么作为按钮设计的a元素与按钮元素的行为不同？

Question

我有一个html button，想要用a替换它。风格应该保持不变。此外，我想使用bootstrap中的center-block类：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

最小例子：fiddle

<a class="center-block">test</a>
<button class="center-block">test</button>

结果是，button居中并保持宽度，a变为100％宽度：

为了弄清楚区别是什么，我将所有用户代理样式从按钮添加到a元素。结果是一样的。以下是chrome中{em>计算样式的差异：diff。

没有可能导致这种行为的差异。

我在这里缺少什么？

Answer 1

不确定真正的问题，但<a>元素是您的类时的内联元素（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a）。中心区块阻止它。

只需删除它就可以获得所需的行为（不知道是否需要该元素块）

.center-block {
  //display: block;
  margin-left: auto;
  margin-right: auto;
 }

fiddle