垂直对齐表格单元格不工作时存在
这拨弄内浮动元素演示了问题: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?
此外,我发现这个职位:*.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floate但它不是一个解决方案我,因为我可能需要浮动的元素。我一直在使用定位模仿相同的布局尝试,但它似乎没有我可以定位一个TD手机,这样我可以使用position:0
尝试增加一个空元素到TD。
<span class="vertical_aligner"></span>
.vertical_aligner {
vertical-align: middle;
height: 100%;
display: inline-block;
}
绝对:绝对里面它定位在正确的“浮动”元素定位似乎在做这项工作。你只需要确保你在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;
}
firefox中的表格单元格不能相对定位。 – RobW
您可以在表格单元格设置line-height
相匹配的单元格的高度,以解决这个问题。
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
line-height:35px;
}
请注意,这只会在单元格中的文字工作占据一行。
这太奇怪了。谢谢! – Matt
我很好奇,想知道原因的问题,为什么这个解决方案工作。任何人? – Shawn