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

Question

这是jsFiddle。如何在不使用绝对值（即pximg ）的情况下将和垂直居中？divtd

纯 CSS 解决方案值得赞赏。谢谢。

Answer 1

Like this?:

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，所以通过将背景图片设置为 no-repeat 并将 a 应用padding-left: 20px到 TD，它可以正确对齐并且不会重叠。并且通过设置 background-position of left center，它将始终保持垂直居中。