2 
  <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 相对于彼此垂直居中，即它们在水平线上是一个，但相对于容器不垂直居中。这就是我想要的。

现在的问题：

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

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

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

因此，如果我将 XXX 属性设置为“中间”，将 YYY 设置为“底部”，那么它应该与它们都设置为中间的情况完全相同，因为假想的内联框的大小和位置没有改变。但事实上，如果它们都没有垂直对齐到中间，我无法垂直居中这些框。

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

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

回答：

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

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

建议：

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

4

2 回答 2

1

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

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

理解 CSS 的 vertical-align 属性

css 技巧-垂直对齐属性

于 2012-07-13T09:16:18.900 回答
1

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

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

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

于 2012-07-13T06:44:49.767 回答