当您有两个内联元素共享同一行时，一个较大的一个vertical-align: baseline较小的一个是vertical-align: middle为什么中间对齐的元素会出现在基线元素的下方？
我整理了一个演示，说明了我在说什么：http: //jsfiddle.net/mLSG2/
看起来较小元素的中线与较大元素的基线对齐，但这对我来说似乎没有多大意义。如果这是真的，其背后的理性是什么？
更一般地说，有人可以解释当不同行高和不同垂直对齐声明的元素共享同一行时如何计算对齐？规范中是否有定义这一点的地方？
按照规范，vertical-align: middle应该“将框的垂直中点与父框的基线加上父框的 x 高度的一半对齐”。在这种情况下，斜体文本的行框的垂直中间应与元素的基线div加上该元素的 x 高度的一半对齐。这使得它非常接近那个基线，真的。
由于此处未设置字体，浏览器通常会使用默认字体大小，例如 16 像素。x-height 取决于字体，但让我们假设粗略的平均值：字体大小的一半，8px。其中一半是 4px，差异很小。（元素的字体大小div不会因存在较大字体的内部元素而改变。）
浏览器错误可能会掩盖这种情况。该vertical-align物业有一个错误的历史。通常最好使用相对定位。