垂直对齐表格单元格中的多个对象

Question

这是jsFiddle。 如何在img内垂直居中div和td，而不使用绝对值（即 px ）？

纯CSS解决方案表示赞赏。感谢。

Answer 1

喜欢这个？：

http://jsfiddle.net/Mgwzx/10/

<div style="width:100%; height:60px; position:relative; overflow:visible;">
    <table style="width:400px; table-layout:fixed" cellspacing="0" cellpadding="0">
        <tr>
            <td style="vertical-align: middle; width:200px;">
                <img align="left" src="http://upload.wikimedia.org/wikipedia/donate/c/c0/Information-icon.png" style="float:left;margin-top:50px;" />
                <div style="text-align:center; float:left; width:150px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</div>
            </td>
        </tr>
    </table>
</div>

Answer 2

如果您不反对将信息图标设置为TD的背景，我会尝试这样做： jsFiddle

td { 
  background: url('http://upload.wikimedia.org/wikipedia/donate/c/c0/Information-icon.png') no-repeat left center;
  padding-left: 20px;
}

我们知道图标的宽度是20px，因此通过将背景图像设置为不重复并将padding-left: 20px应用于TD，它会正确对齐并且不会重叠。通过设置left center的背景位置，它将保持垂直居中。