html - Chrome 中的垂直对齐问题与表格单元格内 img 周围的元素

Question

我只在谷歌浏览器中发现了这个问题:其他元素( <strong> , <em> ...)比简单的文本，在有 <img> 时位置不佳在同一行。

顺便说一句，我试过了

• vertical-align:middle在 <img> 上, 或者一些 line-height ，结果并不完美。
• vertical-align:top 结果很好对于图片，因为其他标签似乎像图片一样对齐(这太疯狂了......)。但我希望图片是vertical-align:middle ...
• 不指定 vertical-align 结果也很好到 table-cell .

你可以查看这个 fiddle

CSS

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;}

HTML

<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>

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

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

Answer 1

“显示:表格单元格”；从 div 向下层叠并应用于包含的文本节点，但它不层叠到包含的 strong 和 em 节点。

将文本包裹在 span 标签中，这将保护文本免受级联“display: table-cell”的影响。