如何在表格中垂直居中元素但不是所有內容

Question

我開發了以下HTML代碼。

 <table style="width: 400px; border-collapse:collapse;"> 
      <tr> 
      <td rowspan="4" class="border-full" style="vertical-align: top; height: 100px;"> 
       <span>It needs to be top:</span> 
       <div style="display: block; vertical-align: center; margin-top:auto; margin-bottom:auto;">I need this part to be vertically centered inside rest part of cell</div> 
      </td> 
      </tr> 
     </table> 

效果就像

------------- 
|first line | 
|second line| 
|   | 
|   | 
------------- 

，我需要的效果，如：

------------- 
|first line | 
|   | 
|second line| 
|   | 
------------- 

這意味着我要在一個元素讓說頭部和內容。我知道我可以做單獨的TD，隱藏邊界，就是這樣。不幸的是，它是帶有rowspans的更大表格的一部分，所以我需要找到一種方法... 我不知道元素的高度（它由同一行中其他單元格中的文本數量確定）。

Answer 1

你需要做一些計算。

divHeight=tdHeight-spanHeight 

，然後應用適當的css.Also讓你的div 顯示：表細胞您可以使用jQuery

做計算

$("td").each(function(){ 
     tdHeight=parseInt($(this).css('height')); 
     spanHeight=parseInt($(this).find('span').css('height')); 
     divHeight=tdHeight-spanHeight; 
     $('.tdDiv').css('height',divHeight); 
     $('.tdDiv').css('vertical-align','middle'); 
}) 

HTML：

<table style="width: 400px; border-collapse:collapse;"> 
    <tr> 
     <td rowspan="4" class="border-full" style="vertical-align: top; height: 100px;"> 
      <span>It needs to be top:</span> 
      <div class="tdDiv" style="display: table-cell;margin-top:auto; margin-bottom:auto;">I need this part to be vertically centered inside rest part of cell</div> 
     </td> 
    </tr> 
    </table> 

小提琴：http://jsfiddle.net/ankur1990/jSJp3/