如何垂直对齐表格单元格中的文本和浮动图像？

Question

我该如何垂直居中text on 1 line？文字可能会改变，所以我想要一个通用的解决方案。

这里举例：http://jsfiddle.net/rfECj/

HTML：

<table> 
    <tr> 
     <td> 
      <img src="img.png"/> 
      text on 2 lines text on 2 lines text on 2 lines 
     </td> 
     <td> 
      <img src="img.png"/> 
      text on 2 lines text on 2 lines text on 2 lines 
     </td> 
     <td> 
      <img src="img.png"/> 
      text on 1 line 
     </td> 
    </tr> 
</table> 

CSS：

table img { 
    margin: 4px 6px 0 6px; 
    float: left; 
} 

table tr td { 
    width: 180px; 
} 

Answer 1

自带心中唯一的解决办法是使用更多的达阵，一个用于图像，一个用于文本。

http://jsfiddle.net/rfECj/5/

Answer 2

很难说，如果这是你的问题想要什么，但你可以使用vertical-align，这对td作品。

table tr td { 
    width: 180px; 
    border:1px solid red; //just to see it better 
    vertical-align:middle; // add this 
} 

http://jsfiddle.net/rfECj/9/

Answer 3

任何错误使用vertical-align: middle;？