html - 在现代浏览器中垂直对齐 float div (2014)

Question

我想再问一次这个问题，因为它的前身是五年前的事了。出于本次讨论的目的，我们无需考虑 IE9 之前的任何内容:

我正在尝试 float 两个具有不同字体大小的 div。我找不到一种方法来在同一基线 上对齐文本。这是我一直在尝试的:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:left;">SMALL</div>
</div>

我目前正在为此苦苦挣扎，我发现的最佳解决方案是对检查进行魔法抵消，但这并不可靠。内联 block 有其自身的问题，我希望避免。

编辑:

http://jsfiddle.net/crw4r/10/

如您所见， float 在顶部对齐，而不是在 baseline 处对齐.

Answer 1

您可以使用 display: table-cell 代替 float 吗？

#header {
  display: table;
  width: 100%;
}

#header div {
  display: table-cell;
}

#left {
  font-size: 40px;
}

#right {
  text-align: right;
}

Demo