垂直对齐表格单元格不工作时存在​​

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; 
} 
​ 

请注意，这只会在单元格中的文字工作占据一行。