使用HREF只在按钮中对齐链接的按钮

Question

我在中心按钮中有一个链接，但问题是链接在按钮的所有x轴中都是可单击的。我只想将链接放在按钮图片中。 更简单的解释方法是，如果指针光标位于按钮旁边，则该指针将变为手形光标。如果它在按钮上，我只想让它变成手形光标。这是我的代码。

img.center2 { 
 
    display: block; 
 
    margin-top: 28px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<a href="SignUp.html"><img src="Button1.png" class="center2"></a>

Answer 1

这是因为你的按钮是一个块级元素，你需要使它inline-block的

img.center2 { 
 
    display: inline-block; 
 
    margin-top: 28px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
div.container { 
 
    text-align: center 
 
}

<div class="container"> 
 
    <a href="SignUp.html"><img src="Button1.png" class="center2"></a> 
 
</div>

Answer 2

添加

Curosor: hand; 

这应该使光标变为图像时的一只手。

Answer 3

这里是一种方法，你可以把图像放在一个用div元素制作的“按钮”中。

我画背景红色是显而易见的。您可以按需要自定义它。

.btnContainer{ 
 
    width:50px; 
 
    height: 30px; 
 
    padding: 15px 20px; 
 
    background: red; 
 
    text-align:center; 
 
} 
 
.btnContainer a{ 
 
    display:inline-block; 
 
    margin:0 auto;  
 
}

<div class="btnContainer"> 
 
<a href="SignUp.html"><img src="Button1.png" class="center2"></a> 
 
</div>

Answer 4

.center img { 
 
    display: inline-block; 
 
    margin-top: 28px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.center { 
 
    text-align: center 
 
}

<div class="center"> 
 
    <a href="SignUp.html"><img src="Button1.png"></a> 
 
</div>