垂直对齐不适用？

Question

我的Div有display:table

JSBIN

<div class='wrapper'>
   <input type="checkbox" class="b"  />
   <span class="c" >aaa bbb ccc</span>
  </div>

这个css：

.wrapper
{
  display: table; 
  border:solid 1px red;
  height:40px;
  width:200px;
}

.b
{
 border:solid 1px green;
 display: table-cell;
 vertical-align: middle; 
}

.c
{
  display: table-cell;
  vertical-align: middle; 
}

如您所见 - .b和.c都有display: table-cell; vertical-align: middle;

问题

checkbox为什么span未垂直对齐？

NB

我知道我可以使用填充等手动对齐复选框。但我正在寻找具有表格单元格和垂直对齐（应该可以工作）的解决方案

Answer 1

试试这个：

.wrapper
{
  display: table-cell;
  border:solid 1px red;
  height:40px;
  width:200px;
  vertical-align: middle; 
}

.b
{  
  border:solid 1px green;
}

div span
{
  border:solid 1px gray;
}

工作：http://jsbin.com/IdOFUmi/11/edit

您实际上希望.wrapper的行为为table-cell，在这种情况下，可以将其子女放在中心位置。

Answer 2

您需要将表中的高度继承到表格单元格：

.wrapper
{
  display: table; 
  border:solid 1px red;
  height:40px;
  width:200px;
}
.b
{ 
  border:solid 1px green;
  display: table-cell;
  vertical-align: middle; 
  height: inherit;
}
.c
{
  display: table-cell;
  vertical-align: middle; 
  height: inherit;
}

请参阅 http://jsbin.com/IdOFUmi/23/edit

上的演示

原因是input元素的行为与其他内联元素的行为不同。出于某种原因，为表格单元格设置高度可以解决问题。

我能提供的最佳解释是基于我对CSS Table模型的阅读 并生成缺少的表元素：

http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

在这种情况下，作为替换元素的input元素不能是表格单元格。因此，CSS引擎在内部生成匿名表单元格包装器。

但是，匿名表格单元格似乎无法识别父表格的高度。

如果元素上指定了高度，则匿名表格单元格应用它。

这种解释的最好证据是以下CSS也给出了相同的结果：

.b
{ 
  border:solid 1px green;
  /* display: table-cell; OMIT THIS */
  vertical-align: middle; 
  height: inherit;
}

没有明确的display: table-cell属性，将绘制匿名元素，并且需要height属性才能使垂直对齐起作用。