リンクボタンをボタン内の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

あなたのボタンは、ブロックレベル要素であるためです、あなたはそれインラインブロック

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>