Question

方案

我正在尝试使用表格单元格方法（'6 Methods For Vertical Centering With CSS'@Vanseo Design）在img内垂直对齐div：

<style>
    .container{border: solid 1px #000;display:table;}
    .contentItem{display:table-cell;vertical-align:middle;}
    .contentImg{float:left; width: 50px; margin: 3px;}
    .contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
</style>
<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="tv1.gif"/>
        <div class="contentDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.</div>
    </div>
</div>

问题

它根本不起作用。这是（不）runnig jsFiddle example。

事实

我正在使用Chrome
图像宽度必须设置为固定值（例如50px）
图像高度是可变的，在图像加载之前是未知的
无法删除contentDiv div标记。实际上它包含一个复杂的结构，而不是简单的文本，带有动态数据。

Answer 1

试试这个

<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="data:image/gif;base64,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"/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.
    </div>
</div>

CSS

.container{border: solid 1px #000;display:table;}
.contentItem{display:table-cell;vertical-align:middle;}
.contentImg{float:left; width: 50px; margin: 3px;vertical-align:text-top;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

如果你不能摆脱divs那么只需更改css

.contentDiv{width: 400px; padding: 0px 2px 2px 2px;}

Answer 2

垂直对齐不起作用，因为您浮动图像。如果你从图像中删除浮动，然后使文本div成为一个内联块元素，那么你的对齐将起作用：

.contentImg{width: 50px; margin: 3px;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px; display:inline-block;}

http://jsfiddle.net/Z8GaT/1/

Answer 3

或者简单地说：

.yourClass{
     position: relative;
     top: 50%;
     margin-top: - "the height of your image" / 2+px;
 }

注意，如果不清楚，则margin-top值应该减去图像的高度除以2。

Answer 4

请查看演示here

删除

.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

可能会解决您的问题:)。

使用CSS在div内部进行图像垂直对齐

4 个答案: