垂直对齐未应用？

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 是？

注意

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

Answer 1

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

.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 表格模型的阅读 以及缺失表格元素的生成：

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 属性才能使垂直对齐起作用。

Answer 2

试试这个：

.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 一样，在这种情况下，可以将其子项放在中心。