0

I have a button which has a link like so:

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

As you can see, I have centered the button. However, from centering it, the link extends to either side of the button, so even when not hovering over the button, clicking either side of it will go to the link which I don't want.

Here is a JSFiddle of my issue if you don't understand my issue. Thanks.

rudolph1024
  • 962
  • 1
  • 12
  • 32
Pav Sidhu
  • 6,724
  • 18
  • 55
  • 110

1 Answers1

1

Inline elements cannot contain block elements. That is why you're seeing this issue.

To achieve this effect, instead wrap the link in a container with text-align: center.

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