2011-09-08 92 views
0

我該如何垂直居中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; 
} 
+0

圖像是否需要中心對齊? –

+0

@Jason是的,但他們的大小不會改變,所以我可以在圖像上添加邊距/填充 –

回答

-1

很難說,如果這是你的問題想要什麼,但你可以使用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/

0

任何錯誤使用vertical-align: middle;