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

我只在Google Chrome浏览器中发现此问题：其他元素（<strong>,<em> ...）比简单文本的定位不准确在同一行中有一个<img>。Chrome中的垂直对齐问题，表格单元格内的img周围的元素

enter image description here

顺便说一句，我试着

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>

看来，其他元素与PIC的底部对齐......

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

来源

2013-03-10 Valky

1，想知道关于这个自己近来，具有遇到[了类似的问题] （http://cssdesk.com/ZBaDL），在[Chrome]（http://i.imgur.com/iYN5G.png）与[IE10]（http://i.imgur.com）/s7lfc。png）和[Firefox]（http://i.imgur.com/mLRfQ.png） – Jeroen 2013-03-10 19:00:32

是同样的笑脸定位问题。我想一个解决方案应该可以帮助任何人使用一些BBcode和表情符号，或者使用Chrome定位一些箭头。 – Valky 2013-03-10 19:07:11

测试很多解决方案后，似乎更简单的方式无需添加其他元素div解决这个问题，里面的table-cell是指定vertical-align位置到table-cell内部的各个要素。

喜欢加入以下：

.right * {vertical-align:top;}

在这种情况下，PIC可以保持比其它元件的另一位置。

来源

2013-03-10 19:17:19 Valky

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

将文本包裹在span标签中，这样可以保护文本不受级联“display：table-cell”的影响。

来源

2013-03-10 19:17:04

'span'不会解决这个问题，正如你可以用Jeroen的例子看到的：http://cssdesk.com/ZBaDL – Valky 2013-03-10 19:23:32

看起来像一个错误，它可以通过添加相同的垂直对准图像被固定：

.right img {vertical-align:top;}

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

来源

2013-03-10 19:18:18 polybios

已经尝试过了，但是如果你想有一个中间垂直对齐的img，这个解决方案不会'吨工作。 – Valky 2013-03-10 19:19:36

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

回答

相关问题