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

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 垂直对齐属性。结果:XXX 向下移动并与空位置对齐。 YYY 保持不变。
2. 我将 YYY 垂直对齐属性设置为“顶部”。 YYY 保持在原来的位置，XXX 与 YYY 的顶部对齐，尽管它自己的值仍然是“中间”。
3. 我将 YYY 垂直对齐属性设置为“底部”。 YYY 保持在原来的位置，XXX 与 YYY 的底部对齐，尽管它自己的值仍然是“中间”。

我一直认为，当一行中有多个内联元素时，它们会形成一行内联框，并且所有垂直对齐值都是相对于该框应用的，即内联框由 v-a 属性垂直定位，而不是在内部它的父级，但在父级内的行内框行内，即在其 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/

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