3

我只在谷歌浏览器中发现了这个问题：除了简单的文本之外的其他元素（<strong>， ...），在同一行中<em>有一个时，位置不好。<img>

在此处输入图像描述

顺便说一句，我试过

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

你可以检查这个小提琴

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>

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

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

4

3 回答 3

0

“显示：表格单元格”；从 div 向下级联并应用于包含的文本节点，但它没有级联到包含的 strong 和 em 节点。

将文本包装在一个跨度标签中，这将保护文本免受级联“显示：表格单元”的影响。

于 2013-03-10T19:17:04.893 回答
0

在测试了很多解决方案之后，似乎在不添加其他元素的情况下解决此问题的更简单方法div是table-cell指定.vertical-aligntable-cell

就像添加以下内容：

.right * {vertical-align:top;}

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

于 2013-03-10T19:17:19.103 回答
0

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

.right img {vertical-align:top;}

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

于 2013-03-10T19:18:18.963 回答