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>

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

现在的问题是：

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

我删除了XXX vertical-align属性。结果：XXX向下移动并且没有任何对齐。 YYY保持不变。
我将YYY vertical-align属性设置为'top'。 YYY仍然在其位置，XXX与YYY的顶部对齐，尽管它自己的值仍然是“中间”。
我将YYY vertical-align属性设置为'bottom'。 YYY仍然在它的位置，XXX与YYY的底部对齐，尽管它自己的值仍然是“中间”。

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

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

那么请你解释一下这个简单例子中的最新情况？

我无法得到的另一件事是这个例子中的定位如何受到行高属性的影响。

解答：

不幸的是，vertical-align：middle不会将内联元素与行上最大元素的中间对齐（正如您所期望的那样）。相反，中间值将使元素与假设的小写“x”（也称为“x高度”）的中间对齐。所以，在我看来，这个值实际上应该被称为“文本中间”，以正确识别它的作用。块引用

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

提醒：

如果搞乱vertical-align会在容器中添加一些文本 - 它会显示用于对齐的基线。

Answer 1

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

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

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

Answer 2

当人们尝试在块级元素上使用 vertical-align 并且没有结果时。如果您在较大的div内有一个较小的div，并希望将较小的vertical-align垂直居中，{{1}}将无法帮助您。

更多信息：您可以参考以下链接：

Understanding CSS’s vertical-align Property

css trick-vertical align properties

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

2 个答案: