по вертикали не применяется?

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

Я знаю, что я могу использовать отступы и т.д., чтобы вручную alignt флажком. Но Im ищет решения с настольной ячейки и вертикальной Align (который должен работать)

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 собственности, анонимный элемент будет нарисован и свойство высоты требуется, чтобы получить вертикальное выравнивание к работе.

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; 
} 

Working: http://jsbin.com/IdOFUmi/11/edit

Вы на самом деле хотите, что .wrapper будет вести себя как table-cell, в этом случае можно будет разместить своих детей в центре.