Как выровнять чекбокс по первой строке текста из двух строк?

Question

[Александр Буки]

Уважаемые мастера CSS подскажите как выровнять чекбокс по первой строке?
К сожалению я использую не нативный чекбокс, а вот эту библиотеку https://element.eleme.io/ для vue js.

В итоге на выходе получается такой html:

<p><label  role="checkbox" class="el-checkbox">
    <span aria-checked="mixed" class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox" aria-hidden="true" class="el-checkbox__original" 
                    value="oop_treasury_concessionaire_daily_report__full_access">
    </span>
    <span class="el-checkbox__label">
        Ежедневный отчет концессионера. Полный доступ
    <!----></span>
</label>
</p>

<p ><label role="checkbox" class="el-checkbox"><span aria-checked="mixed" class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="sno_znu__view"></span><span class="el-checkbox__label">
                                                        ЗНУ: Просмотр
                                            <!----></span></label></p>

У меня это выглядит так.

Ширина p будет ограничена и переносы по-любому нужны!
Как видите выравнивание при переносе строки ( white-space: normal;)
самого чекбокса идет по нижней строке.
Как сделать чтобы выравнивание шло по верхней строке?
Если ставлю
.el-checkbox__label {
white-space: normal;
vertical-align: top;
}
то чекбокс поднимается на верх, но съезжает в самый верх label и находится не на одной оси со строкой:



На codepen подключил стили из element ui примерно тоже что и у меня рисует:
https://codepen.io/alex-buki/pen/YojMdZ

Answer 1

[Eugene Chefranov]

.el-checkbox__input {
    vertical-align: top;
    margin-top: 3px;
}

Comments

[Александр Буки]

Спасибо!

[Сергей delphinpro]

alexbuki, а если изменить размер шрифта? тогда уж лучше по базовой линии выравнивать...

а вообще

<span><input type"checkbox"></span> Some text

span {
  height: 16px; /* должен равняться line-height текста */
  display: inline-flex;
  vertical-align: middle;
  align-item: center;
}

Answer 2

[wqertAnna]

https://codepen.io/anon/pen/EBpzQZ
теперь это адаптивно, при изменении размера шрифта чекбокс всё равно остаётся по центру.

.el-checkbox__label {
    white-space: normal;
  font-size: inherit;  // размер шрифта наследуется от .el-checkbox
  line-height: 1.2em; // важно, чтобы значение было такое же, как высота контейнера чекбокса
}
.el-checkbox {
  display: flex;
  align-items: flex-start;
  font-size: 14px; // менять шрифт здесь, chekcbox всё равно по центру строки
}

.el-checkbox__input {
  display: flex;
  align-items: center;
  height: 1.2em; // тоже значение, что и высота строки .el-checkbox__label 
}

Comments

[Александр Буки]

Спасибо!