垂直对齐：基线在Chrome中无效

Question

我有一个很傻的问题，说实话。无论如何，这里是问题所在。 我一直在尝试使用vertical align: baseline;，它本身是有效的。问题是它在IE和Firefox中有效，但在Chrome中出现了奇怪的问题。 这是Chrome中的问题截图： http://img576.imageshack.us/img576/8976/chromem.png 这是它应该看起来的样子（有14像素的填充，否则会在顶部）： http://img62.imageshack.us/img62/140/firefoxi.png 在IE和Firefox中它看起来一样。

我没有用表格来放置图片和文本（只是指出） 希望有人能帮助我，因为这个问题已经让我头疼了将近两天 :(

- Raelona

---

请提供代码片段。最好在http://jsbin.com或http://jsfiddle.net上。 - Chris Calo

Answer 1

如果您将背景div设置为display: table，并将其每个子元素设置为display: table-cell，它应该可以工作。

#outer_div
{
    display: table; /* display: inline-table; works as well */
}

#outer_div div
{
    display: table-cell;
    vertical-align: baseline;
}

- Justin Lubin