Link 元素居中时延伸至宽度

Question

我有一个带有 link 的按钮，如下所示：

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

如您所见，我已将按钮居中。但是，从居中开始，link 会延伸到按钮的任一侧，因此即使没有将鼠标悬停在按钮上，单击它的任一侧也会转到我不想要的 link。

Here is a JSFiddle 如果你不明白我的问题。谢谢

Answer 1

行内元素不能包含块元素。这就是您看到此问题的原因。

要实现此效果，请将 link 包装在带有 text-align: center 的容器中。

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

Link extends to width when centering element