垂直對齊表格單元格不工作時存在​​

Question

這撥弄內浮動元素演示了問題：http://jsfiddle.net/wrYsx/

相關代碼：

<style> 
    #floater { 
     background-color: red; 
     height: 35px; 
     width: 35px; 
     float: right; 
    } 

    table { 
     width: 100%; 
    } 

    table tr td { 
     border: 1px solid green; 
     vertical-align: middle; 
     height: 35px; 
    } 
</style> 
<table> 
    <tr> 
     <td> 
      <div id='floater'></div> 
      some text 
     </td> 
    </tr> 
</table> 

<table> 
    <tr> 
     <td> 
      some text 
     </td> 
    </tr> 
</table> 

基本上，如果我有一個一個TD給定的高度，我可以使用vertical-align：middle來居中td中的東西。但是，當是浮動（右在我的情況）的TD內的另一個元素則垂直對齊的不尊重和文本坐鎮TD的頂部。任何想法如何設計這個，所以你可以有垂直對齊和浮動元素的td？

此外，我發現這個職位：stackoverflow.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floate但它不是一個解決方案我，因爲我可能需要浮動的元素。我一直在使用定位模仿相同的佈局嘗試，但它似乎沒有我可以定位一個TD手機，這樣我可以使用position：0

Answer 1

嘗試增加一個空元素到TD。

<span class="vertical_aligner"></span> 

.vertical_aligner { 
    vertical-align: middle; 
    height: 100%; 
    display: inline-block; 
} 

Answer 2

絕對：絕對裏面它定位在正確的「浮動」元素定位似乎在做這項工作。你只需要確保你在TD上放置了position:relative。

#floater { 
    background-color: red; 
    height: 35px; 
    width: 35px; 
    position:absolute; 
    top:0; 
    right:0 
} 

table { 
    width: 100%; 
} 

table tr td { 
    border: 1px solid green; 
    vertical-align: middle; 
    height: 35px; 
    position:relative; 
} 

Answer 3

您可以在表格單元格設置line-height相匹配的單元格的高度，以解決這個問題。

jsFiddle example

table tr td { 
    border: 1px solid green; 
    vertical-align: middle; 
    height: 35px; 
    line-height:35px; 
} 
​ 

請注意，這隻會在單元格中的文字工作佔據一行。