html - 垂直对齐未应用？

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兼有.cdisplay: table-cell; vertical-align: middle;

问题

为什么checkboxis 时 is 不垂直对齐span？

注意

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

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/IdOFMi/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 表格模型和缺失表格元素的生成的阅读：

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