Подскажите пожалуйста, как выровнить label (Я согласен получать обновления на почту) относительно checkbox

Question

.form__checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #787878;
  border-radius: 7px;
  margin-bottom: 52px;
}

.form__label-checkbox {
  font-size: 14px;
  line-height: 114%;
}

<div class="form__group">
  <label class="form__label-checkbox">
     <input class="form__checkbox" name="checkbox" type="checkbox"> 
     Я согласен получать обновления на почту
  </label>
</div>

Answer 1

Самое простое - это использовать flexbox. Но есть и другие варианты. Интересно, что у вашего checkbox почему-то задан margin-bottom. Очевидно, что его нужно убрать, чтобы все было визуально выровнено.

.form__checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #787878;
  border-radius: 7px;
/*  margin-bottom: 52px; */
}

.form__label-checkbox {
  font-size: 14px;
  line-height: 114%;
  
  display: flex;
  align-items: center;
}

<div class="form__group">
  <label class="form__label-checkbox">
     <input class="form__checkbox" name="checkbox" type="checkbox"> 
     Я согласен получать обновления на почту
  </label>
</div>

БЛОГ НА HUSL

Подскажите пожалуйста, как выровнить label (Я согласен получать обновления на почту) относительно checkbox

Ответы (1 шт):