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

避免分配宽度您的图像，而不是换一个div content-holder内<a>标签，然后应用定位持有人。图像将保持不变。

看一看下面的代码片段：

.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