Question

谢谢大家的答复。事实证明，这与原始图像大小有关。我是StackOverflow的新手，所以现在我知道要使用填充图像。再次感谢！

我一直在设计一个网站，但遇到一个奇怪的错误，无法解决。我在<div>侧有3个<a>元素，使用文本对齐中心居中。 <div>和/或<a>元素似乎与下一个元素垂直偏移。我希望有解决方案，

.iconCardCont {
  text-align: center;
}

.iconCard div {
  background-color: #86b55bff;
  width: 160px;
  height: 200px;
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.iconCard img {
  margin-top: 20px;
}

.iconCard h2 {
  background-color: white;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
  color: #86b55bff;
}

.iconCard a {
  vertical-align: bottom;
  overflow: hidden;
}

<section class="iconCardCont">
  <a href="" class="iconCard">
    <div><img src="http://via.placeholder.com/98x105">
      <h2>Calendar</h2>
    </div>
  </a>
  <a href="" class="iconCard">
    <div><img src="http://via.placeholder.com/98x105">
      <h2>Signup</h2>
    </div>
  </a>
  <a href="" class="iconCard">
    <div><img src="http://via.placeholder.com/98x105">
      <h2>Info</h2>
    </div>
  </a>
</section>

Answer 1

您可以看到，如果您运行了该代码段，则所有项目都排成一行，这与您的屏幕截图不同，即使实际图像没有损坏（在以后尝试使用https://placeholder.com/此处出现问题）时，也会发生这种情况，我认为您的代码中肯定还有其他导致问题的原因。

要注意的一件事是，在您的CSS .iconCard a中没有引用任何内容，因为您的<a>标签是该类的标签，因此它正在其中寻找其他<a>标签

我认为您可能要寻找的是vertical-align，但您需要为此设置容器，而不是要在其中对齐的项目。

.iconCardCont {
  text-align: center;
}

.iconCard div {
  background-color: #86b55bff;
  width: 160px;
  height: 200px;
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.iconCard img {
  margin-top: 20px;
}

.iconCard h2 {
  background-color: white;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
  color: #86b55bff;
}

.iconCard a {
  vertical-align: bottom;
  overflow: hidden;
}

<section class="iconCardCont">
  <a href="" class="iconCard">
    <div><img src="http://via.placeholder.com/150x100">
      <h2>Calendar</h2>
    </div>
  </a>
  <a href="" class="iconCard">
    <div><img src="http://via.placeholder.com/150x100">
      <h2>Signup</h2>
    </div>
  </a>
  <a href="" class="iconCard">
    <div><img src="http://via.placeholder.com/150x100">
      <h2>Info</h2>
    </div>
  </a>
</section>

Answer 2

我认为您的意思是用短划线标记的空间对吗？

一种方法是将父字体大小设置为零，并给子字体设置字体大小。

.iconCardCont {
  text-align: center;
  font-size: 0;
}

.iconCard div {
  background-color: #86b55bff;
  width: 160px;
  height: 200px;
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 20px;
}

.iconCard img {
  margin-top: 20px;
}

.iconCard h2 {
  background-color: white;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
  color: #86b55bff;
}

.iconCard a {
  vertical-align: bottom;
  overflow: hidden;
}

<section class="iconCardCont">
  <a href="" class="iconCard">
    <div><img src="CalendarIcon.png">
      <h2>Calendar</h2>
    </div>
  </a>
  <a href="" class="iconCard">
    <div><img src="SignupIcon.png">
      <h2>Signup</h2>
    </div>
  </a>
  <a href="" class="iconCard">
    <div><img src="InfoIcon.png">
      <h2>Info</h2>
    </div>
  </a>
</section>

页面中间的3个div具有垂直偏移

2 个答案: