如何垂直對齊表格單元格中的文本和浮動圖像？

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;？