css - 为什么元素的垂直对齐会影响其 sibling 的对齐？

Question

  <div class="bordered"  style="height: 300px; text-align: center">
        <div class="bordered inline-blocked" style="height: 100px; vertical-align: middle">XXX</div>
        <div class="bordered inline-blocked" style="height: 200px; vertical-align: middle">YYY</div>
    </div>

Div XXX 和 YYY 相对于彼此垂直居中，即它们在水平线上，但不是相对于容器垂直居中。这就是我想要的。

现在问题:

如果我更改两个垂直对齐属性之一，就会发生奇怪的事情。

1. 我删除了 XXX vertical-align 属性。结果:XXX 被向下移动并定位到与空无对齐的位置。 YYY 保持不变。
2. 我将 YYY 垂直对齐属性设置为“顶部”。 YYY 保持原位，XXX 与 YYY 的顶部对齐，尽管其自身的值仍处于“中间”。
3. 我将 YYY 垂直对齐属性设置为“底部”。 YYY 保持原位，XXX 与 YYY 的底部对齐，尽管它自己的值仍然是“中间”。

我一直认为，当一行中有多个内联元素时，它们会形成一行内联框，并且所有 vertical-align 值都是相对于该框应用的，即内联框由 v-a 属性垂直定位，而不是 inside它的父级，但在父级内部的行内框行内，即在其 sibling 的行内。

因此，如果我将 XXX 属性设置为 'middle'，将 YYY 属性设置为 'bottom' 那么它应该与两者都设置为 middle 的情况完全相同，因为假想内联框的大小和位置不是改变。但事实上，如果它们都没有垂直对齐到中间，我就不能将这些框垂直居中。

那么您能解释一下这个简单示例中发生了什么吗？

我无法理解的另一件事是此示例中的定位如何受 line-height 属性的影响。

回答:

Unfortunately, vertical-align: middle will not align the inline element to the middle of the largest element on the line (as you would expect). Instead, a value of middle will cause the element to be aligned with the middle of a hypothetical lower-case “x” (also called the “x-height”). So, it seems to me that this value should actually be called “text-middle” to correctly identify what it does. Blockquote

来自 http://www.impressivewebs.com/css-vertical-align/ ，感谢 prash 和 brains911。

建议:

如果与垂直对齐混淆，请向您的容器添加一些文本 - 它会显示用于对齐的基线。

Answer 1

http://www.impressivewebs.com/css-vertical-align/

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

尝试阅读一些关于它的文章。很难描述其中的细微差别，而且这些文章有一些漂亮的视觉效果。或者您可以尝试使用谷歌搜索。