Question

请检查我的代码，点击＆＃34;运行＆＃34;查看result。

我希望图片能够居中，并将用作链接，但问题是整个div正在成为一个链接而我不想要这样。你可以看到div本身就是一个链接，甚至在图片边框之外。如何确保图像只是一个链接，而不是它周围的区域？

我的代码：

＆＃13;

.myDiv {
  border: 1px solid black;
}

.myImage {
  display: block;
  width: 270px;
  max-width: 100%;
  margin: auto;
}

＆＃13;

<div class="myDiv">
  <a href="https://www.google.com">
    <img class="myImage" src="http://via.placeholder.com/350x150">
  </a>
</div>

＆＃13;

（我正在寻找一种适用于所有主流浏览器的简单解决方案）

Answer 1

这是因为您已在display:block中应用<img>，因此需要整个宽度。

使用text-align:center将图像对齐到中心，然后从图像中删除display:block

.myDiv {
  border: 1px solid black;
  text-align: center;
  font-size: 0; /*for removing the below space in inline elements */
}

.myImage {
  width: 270px;
  max-width: 100%;
}

<div class="myDiv">
  <a href="https://www.google.com">
    <img class="myImage" src="http://via.placeholder.com/350x150">
  </a>
</div>

或者您可以使用 Flexbox

.myDiv {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.myImage {
  width: 270px;
  max-width: 100%;
  display:block;
}

<div class="myDiv">
  <a href="https://www.google.com">
    <img class="myImage" src="http://via.placeholder.com/350x150">
  </a>
</div>

如何防止div成为链接？

1 个答案: