不能垂直居中表格单元格中的浮动元素

时间:2012-08-21 15:39:54

标签: html css css-tables

我有一个在表格内声明的表单元素,这些元素本身就垂直居中于它们的表格单元格。

我有一个表单元格,它有一个无序列表和一个左边的选择框,以便自己内联它们。似乎在同一个单元格中有两个这样的元素会破坏我的第二个元素(选择框)的垂直居中,并强制到单元格的顶部(仍然与无序列表内联,不再垂直居中)。

我无法弄清楚为什么会发生这种情况以及如何解决问题。有什么想法吗?

以下是代码:http://jsfiddle.net/pVpnd/1/

如果你隐藏了无序列表,那么选择框将按照它应该的方式在表格单元格中居中,但只有当它是单元格中的唯一元素时才会居中。

1 个答案:

答案 0 :(得分:6)

尝试使用以下CSS而不是float:

select,ul{
    display:inline-block;
    vertical-align:middle;
}​

<强> jsFiddle example