HTML + CSS - 使用超鏈接居中圖像

Question

所以我有兩個帶有超鏈接的圖像，當我試圖將它們居中時，它們的表現很有趣，所以我想，嗯，也許元素的尺寸......扭曲了？ 不知何故？ 所以我在元素周圍添加了一個邊框，果然，它們的大小看起來像這樣：

https://gyazo.com/f5a91e1a26eaf3aea6208ffa2eea698c

HTML：

<a id="home-invite-button" href="https://url.com" target="_blank"><img 
src="Images/Invite Button.png"></a>
<a id="home-wiki-button" href="https://url.com" target="_blank"><img 
src="Images/Wiki Button.png"></a>

CSS：

#home-invite-button {
  position: absolute;
  top: 540px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  width: 50%;
  border: thin black solid;
}

#home-wiki-button {
  position: absolute;
  top: 630px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  width: 50%;
  border: thin black solid;
}

所以問題是，如何使元素的實際大小與實際圖像相同？ 非常感謝！

Answer 1

避免為您的圖像分配寬度，而是將<a>標簽包裹在 div content-holder ，然后將定位應用到支架上。 圖像將保持不變。

看看下面的片段：

 .content-holder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: thin black solid; } #home-invite-button { display: flex; border: 1px solid red; } #home-wiki-button { display: flex; border: 1px solid red; }

 <div class="content-holder"> <a id="home-invite-button" href="https://url.com" target="_blank"><img src="http://placehold.it/100x100"></a> <a id="home-wiki-button" href="https://url.com" target="_blank"><img src="http://placehold.it/100x100"></a> </div>

希望這是您正在努力實現的目標。

Answer 2

你可以試試這個代碼

a img {
    display: block;
    margin: 0 auto;

}

如果您還看到此鏈接： JSfiddle