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

【问题标题】：Why vertical-align of element affects align of its siblings?为什么元素的垂直对齐会影响其兄弟元素的对齐？
【发布时间】：2012-07-12 23:37:45
【问题描述】：

  <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>

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

现在的问题：

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

我删除了 XXX 垂直对齐属性。结果： XXX 向下移动并与空对齐。 YYY 保持不变。
我将 YYY 垂直对齐属性设置为“顶部”。 YYY 保持原位，XXX 与 YYY 的顶部对齐，尽管它自己的值仍然是“中间”。
我将 YYY 垂直对齐属性设置为“底部”。 YYY 保持原位，XXX 与 YYY 的底部对齐，尽管它自己的值仍然是“中间”。

我一直认为，当一行中有多个内联元素时，它们会形成一行内联框，并且所有垂直对齐值都相对于该框应用，即内联框由不在内部的 va 属性垂直定位它的父级，但在父级内的行内行内，即在其兄弟级的行内。

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

那么你能解释一下这个简单的例子中发生了什么吗？

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

回答：

不幸的是，vertical-align: middle 不会将内联元素对齐到行中最大元素的中间（如您所料）。相反，中间值将导致元素与假设的小写“x”（也称为“x-height”）的中间对齐。所以，在我看来，这个值实际上应该被称为“text-middle”来正确识别它的作用。块引用

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

建议：

如果弄乱了垂直对齐，请在容器中添加一些文本 - 它会显示用于对齐的基线。

【问题讨论】：

标签： css vertical-alignment

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

当人们尝试在块级元素上使用 vertical-align 却没有得到任何结果时。如果您在较大的 div 中有一个较小的 div，并且希望将较小的 vertical-align 垂直居中，vertical-align 将无济于事。

css trick-vertical align properties

【讨论】：

抱歉，我刚才没有提到我的类 'inline-blocked' 设置了属性 'display: inline-block'。