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

【问题标题】：Why does changing the vertical alignment of one inline div only affect a separate inline div?为什么更改一个内联 div 的垂直对齐方式只会影响一个单独的内联 div？
【发布时间】：2016-11-29 23:24:54
【问题描述】：

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

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

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

JSfiddle Before

JSfiddle After

【问题讨论】：

我会阅读 this article 以完全理解 vertical-align。对我来说主要的收获是：“好吧，从技术上讲，使用垂直对齐进行布局是一种技巧，因为它不是出于这个原因而发明的。它用于对齐文本和文本旁边的元素。”
看看this interesting question可能会给你更多的见解...

标签： css

【解决方案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找到有关此行为的更多详细信息

【讨论】：