我只在谷歌浏览器中发现了这个问题:其他元素( <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>
似乎其他元素与图片的底部对齐......
关于这个丑陋的问题,以及如何修复垂直文本在任何浏览器上正确对齐的任何想法?
最佳答案
“显示:表格单元格”;从 div 向下层叠并应用于包含的文本节点,但它不层叠到包含的 strong 和 em 节点。
将文本包裹在 span 标签中,这将保护文本免受级联“display: table-cell”的影响。
关于html - Chrome 中的垂直对齐问题与表格单元格内 img 周围的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15326072/