Как выровнять по высоте?

Question

[DrunkMaster]

Почитал маны, пишут что бы автоматически выровнялось по высоте надо задать line-height больше или равным чем у родителя. Но тут не срабатывает.
Пример https://jsfiddle.net/u5vypq19/

<div class="div">
<input type="checkbox" id="required1" class="input">
<label for="required1" class="word">обязательное</label>
</div>

.div{
  height: 3rem;
}
.input, .word{
  line-height: 3rem;
}

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/u5vypq19/2/

Comments

[DrunkMaster]

0.2em плохая идея, сраболало именно тут, в каких-то местах этого будет недостаточно, а если шрифт мелкий то избыточно

[Сергей delphinpro]

DrunkMaster: Во-первых, em как-раз-таки зависит от размера шрифта =)
Во-вторых, это не имеет никакого отношения к вертикальному выравниванию. Тут важно то, что обнулены margin-top и margin-bottom, которые браузер назначает по умолчанию.

[Сергей delphinpro]

Надо было мне так написать https://jsfiddle.net/u5vypq19/3/ =) чтобы не смущать вас лишними цифрами