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 img {
    display: block;
    margin: 0 auto;

}

如果你也看到这个Link：JSfiddle

Answer 2

避免为图像分配宽度，而是将 <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>

希望这就是您要实现的目标。

HTML + CSS - 使用超链接居中图像

HTML + CSS - Centering Images With Hyperlinks

html

css

image

alignment

visual-glitch