html - 当在一个 block 的显示中链接一个相对图像时，它链接整个页面的宽度？

Question

我找到了一个解决这个问题的帖子，但没有包含具体的位置值，但我希望我的图像相对定位。当我在图像上添加链接并将其显示为 block 并垂直居中时，页面的宽度变为链接。我该如何阻止它？

#logo {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

<a href="#">
  <img id="logo" src="images/diMatteos2.png" />
</a>

Answer 1

这不是关于 position: relative; 而是 display: block;。 block 级元素占据整个宽度。如果不想使用全宽，可以使用 display: inline-block; 替换它。

#logo {
  display: inline-block;
  margin: 0 auto;
  margin-top: 30px;
}

<a href="#">
  <img id="logo" src="images/diMatteos2.png" />
</a>