Question

我认为每个inline-block元素都根据其各自的vertical-align值与一行对齐。

但似乎我们可以根据文本的位置让元素对齐。

我们举个例子

.icon-card {
  border: 1px solid black;
  display: inline-block;
  width: 18%;
}

.section1 .icon-card {
  vertical-align: top;
}

.section2 .icon-card {
  vertical-align: baseline;
}

.section3 .icon-card {
  vertical-align: baseline;
}

.section1,
.section2,
.section3 {
  width: 260px;
}

<div class='section1'>
  <div class='icon-card' style='height:50px'>
  </div>
  <div class='icon-card' style='height:80px'>
  </div>
  <div class='icon-card' style='height:40px'>
  </div>
  <div class='icon-card' style='height:200px'>
  </div>
</div>
<div class='section2'>
  <div class='icon-card' style='height:50px'>
  </div>
  <div class='icon-card' style='height:80px'>
  </div>
  <div class='icon-card' style='height:40px'>
  </div>
  <div class='icon-card' style='height:200px'>
  </div>
</div>
<div class='section3'>
  <div class='icon-card' style='height:50px'>
    Not
  </div>
  <div class='icon-card' style='height:80px'>
    Quite what
  </div>
  <div class='icon-card' style='height:40px'>
    I
  </div>
  <div class='icon-card' style='height:200px'>
    want
  </div>
</div>

（或参见https://jsfiddle.net/tqgqrd9a/4/）

在此示例中，我们有section2和section3，“应该”对齐相同。他们为什么不呢？到底是怎么回事？

理想情况下，我更喜欢能够解释正在发生的事情的答案并告诉我“我应该从中学到什么”。

Answer 1

我无法解释这一点，但我理解，我会尽力而为

这里令人困惑的部分是vertical-align: baseline，它指的是文字的基线。在第2部分中没有文本，因此基线只是父级的最低点（最高容器确定了这一点）。

第3节，因为你有文字所以这些方框在文字的基线处排成一行。文本的基线是每个框中所有文本的最低点（通常是文本数量最多的文本）。第3节中的每个框都从文本开始处开始，因为框上有高度，所以文本溢出框，基线成为每个框中所有文本的最低点，在我们的情况下，框1和2都有相同数量的线形成基线。如果您向其中一个添加更多文本，您将看到对齐方式也会发生变化，因为基线会因更多文本而发生变化。

如果你将overflow: hidden放在.icon-card上，那么第2和第3部分将是相同的，因为文本不会溢出，而基线是父级的最低点（因为文本不能因为溢出隐藏）。

不确定这是否是一个很好的解释，但我希望你理解它。

这里的一些文档

https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

https://css-tricks.com/what-is-vertical-align/

内联块div与哪些对齐？

1 个答案: