Chrome中的垂直对齐问题，表格单元格中的img周围的元素

Question

我发现此问题仅适用于谷歌浏览器：其他元素（<strong>，<em> ...）比简单文字更好，而<img>位于vertical-align:middle同一条线。

顺便说一句，我试过

{li> <img> line-height或某些vertical-align:top，结果并不完美。
• 对于pic来说结果很好vertical-align:middle，因为似乎其他标签像pic一样对齐（这很疯狂......）。但我希望图片为vertical-align ...
• 如果没有为table-cell指定img {height:25px;} .table {display:table;width:400px;} .left {display:table-cell;width:30%;padding:10px;background:#CCC;} .right {display:table-cell;width:70%;padding:10px;background:#EDEDED; vertical-align:top;} ，结果也会很好。

您可以查看 fiddle

CSS

<div class="table">

    <div class="left">Left content</div>

    <div class="right">
        Some text some text, some text, some text, 
        some text, some text, some text, and a 
        <strong>bold text</strong>, then a pic : 
        <img src="some_pic_url"/>
        and <em>italic</em>
    </div>

</div>

HTML

{{1}}

似乎其他元素与图片的底部对齐......

有关这个丑陋问题的任何想法，以及如何在任何浏览器上正确对齐垂直文本？

Answer 1

“display：table-cell”;从div中向下级联并应用于包含的文本节点，但它不会级联到包含的strong和em节点。

将文本换行到span标记中，这样可以防止文本获得级联的“display：table-cell”。

Answer 2

在测试了很多解决方案之后，似乎在div内添加另一个table-cell元素来解决此问题的更简单方法是为内部的每个元素指定vertical-align位置table-cell。

喜欢添加以下内容：

.right * {vertical-align:top;}

在这种情况下，pic可以保持与其他元素不同的位置。

Answer 3

看起来像一个错误，可以通过向图像添加相同的垂直对齐来修复它：

.right img {vertical-align:top;}

http://jsfiddle.net/J8ved/1/