css - 为什么更改一个内联 div 的垂直对齐方式只会影响一个单独的内联 div？

Question

我有 3 个相同大小的带实线边框的内联 div，因此它们显示为矩形。我给了他们 left、center 和 right 类。

当我将 left 类作为 vertical-align: top 并将 right 类作为 vertical-align: middle，它们看起来像这样:

如果我将 vertical-align: bottom 添加到 center 类，它根本不会影响中心 block 。相反，它将 right 类向上移动，就好像我根本没有制定任何 vertical-align 样式规则一样。什么 CSS 规则导致了这种情况？

JSfiddle Before

JSfiddle After

Answer 1

嗯，这是一个有趣的问题。我认为秘诀在于理解 vertical-align: middle 与其他元素的不同之处，因为它受到父元素的小写字母的影响。我将 div 包裹在包装器中以显示它:

.wrapper {
  margin: 0;
  padding: 0;
  height: 120px;
  width: 500px;
}

div {
    display:inline-block;
    height:100px;
    width:25px;
    border:1px solid black;
}

.left{
  vertical-align: top;
}

.center{
}

.right{
  vertical-align: middle;
}

<div class="wrapper">
  sddsfsdfdsfdsfdsfdsfdsfdsfdsaa
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

所以很容易看出右边的div，vertical align: middle是相对于小写字母的位置。

至于第二个例子:

.wrapper {
  margin: 0;
  padding: 0;
  height: 120px;
  width: 500px;
}
div {
    display:inline-block;
    height:100px;
    width:25px;
    border:1px solid black;
}

.left{
  vertical-align: top;
}

.center{
  vertical-align: bottom;
}

.right{
  vertical-align: middle;
}

<div class="wrapper">
  test test test test test
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

这里的一切都按规则进行 - 元素根据基线对齐，中间对齐父容器的字母。

您可以通过 here 找到有关此行为的更多详细信息