CSS - 垂直對齊表格單元格底部的文本部分

Question

如何對齊td頂部的一個句子和底部的另一個句子？

Answer 1

您可以簡單地添加與

.bottom-div { 
    bottom: 0; 
    left: 0; 
    position: absolute;   
} 

另一個股利和包裝股利（或表細胞）只需要position: relative;

http://jsfiddle.net/RnZPM/

另一種方式是建立一個表這個單元格的高度爲100％，行數爲align：頂部和底部。

Answer 2

如果沒有在td本身內使用一些進一步的標記，沒有辦法做到這一點。實現這一目標的一種方法是通過使用絕對定位：

<table style="height:200px"> 
    <tr> 
     <td style="position:relative;"> 
      <div style="position: absolute; top:0px;">Top</div> 
      <div style="position: absolute; bottom:0px;">Bottom</div> 
     </td> 
    </tr> 
</table> 

我已經把造型內嵌告訴你到底是什麼被應用其中。請參閱this example瞭解基於樣式表的等效項。

Answer 3

簡單......！

 <style type="text/css"> 
     td { height:50px;} 
     </style> 

     <table width="50%" border="1"> 
      <tr> 
      <td style="vertical-align:bottom">abc</td> 
      <td style="vertical-align:top">xyz</td> 
      </tr> 
     </table>