当元素居中时，链接扩展到宽度

Question

我有一个按钮，它有一个链接，像这样:

<a href="/">
  <button style="margin: 0 auto; display: block;">Link</button>
</a>

如你所见，我已经把按钮居中了。但是，从居中开始，链接扩展到按钮的两侧，所以即使没有将鼠标悬停在按钮上，单击它的任何一侧都会进入我不想要的链接。

如果你不明白我的问题，这里是我的问题的JSFiddle。谢谢。

Answer 1

行内元素不能包含块元素。这就是为什么你会看到这个问题。

要达到此效果，请将链接包装在带有text-align: center的容器中。

<div style="text-align: center;">
    <a href="/">
        <button>Link</button>
    </a>
</div>