Блог

Главная - Вопросы по программированию - Флажок выравнивания по вертикали с меткой в несколько строк

Флажок выравнивания по вертикали с меткой в несколько строк

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть эта длинная метка с плавающим справа флажком, который должен быть выровнен по вертикали посередине с меткой, но, похоже, я не могу заставить его работать, пробуя разные способы. Это то, что я получаю:

введите описание изображения здесь

HTML:

 <label class="checkbox-label">I travel to multiple locations - at least 5 times a yea
     <input class="check-input" type="checkbox" value="6"/>
</label>

CSS:

 .checkbox-label {
padding: .7rem;
border: 1px solid #F5F5F6;
background-color: #F5F5F6;
border-radius: 4px;
font-weight: 900;
width: 100%;
text-align: start;
color: #525159;
font-size: 1rem;

}

 .check-input {
    float: right;
    margin-top: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

То, чего я пытаюсь достичь, приведено ниже — флажок всегда выравнивается по центру по вертикали с меткой, независимо от того, сколько в ней строк:

введите описание изображения здесь

Любые предложения приветствуются…

Ответ №1:

Вы можете просто обернуть свои checkBox и label в div и использовать flex и другие flex properties , чтобы убедиться, что они находятся vertically посередине center флажка regardless размера содержимого (метки).

Flex Рекомендуется использовать вместо использования float свойства, поскольку flex будет очень responsive в современных браузерах и

Живая демонстрация:

 .checkbox-label {
  border-radius: 4px;
  padding: .7rem;
  font-weight: 900;
  background-color: #F5F5F6;
  text-align: start;
  color: #525159;
  font-size: 1rem;
}

.check-input {
  margin-top: 5px;
  cursor: pointer;
}

.checkboxxxxx {
  display: flex;
  justify-content: space-between;
  align-items: center;
}  
 <div class="checkboxxxxx">
  <label for="check-input" class="checkbox-label">I travel to multiple locations - at least 5 times a yea I travel to multiple locatieast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locations - at leas - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatio - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatio - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatio - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatiot 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locations - at least 5 times a yons - at least 5 times a yea I travel to multiple locations - at least 5 times a yea </label>
  <input id="check-input" class="check-input" type="checkbox" value="6" />
</div>