Как центрировать пользовательский флажок по вертикали в div? - PullRequest
Новая
       18

Как центрировать пользовательский флажок по вертикали в div?

0 голосов
/ 20 февраля 2020

Я пытаюсь использовать flex для выравнивания элементов по вертикали, но пользовательский флажок не выровнен, код ниже ясно показывает проблему. Кто-нибудь знает, в чем проблема? 

input[type=checkbox] {
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
  transform: scale(1.2);
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  color: #00BFF0;
  width: 14px;
  height: 18px;
  visibility: visible;
  border: 1px solid #FFF;
  padding: 0 3px;
  margin: 2px 0;
  border-radius: 8px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.09), 0 0 5px 0 rgba(0, 0, 0, 0.18);
}

input[type=checkbox]:checked:after {
  content: "\2714";
  display: unset;
  font-weight: bold;
}
<div style="display:inline-block; height:40px; display: flex;  align-items: center; border: 1px solid 
        black;">

  <input type="checkbox">
  <span id="text">TEXTTEXTTEXTTEXT</span>
</div>

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

Учитывая, что вы определяете размеры явно, вы можете установить псевдоэлемент с помощью position:relative; top: -50%.

. Для этого подхода не забудьте левую клавишу метки: 

  input[type=checkbox] {
        cursor: pointer;
        font-size: 17px;
        visibility: hidden;
        transform: scale(1.2);
    }

    input[type=checkbox]:after {
        content: " ";
        background-color: #fff;
        display: inline-block;
        position:relative;
        top:-50%;
        left:-14px;
        color: #00BFF0;
        width: 14px;
        height: 18px;
        visibility: visible;
        border: 1px solid #FFF;
        padding: 0 3px;
        margin: 2px 0;
        border-radius: 8px;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
    }

    input[type=checkbox]:checked:after {
        content: "\2714";
        display: unset;
        font-weight: bold;
    }
 
    <div style="display:inline-block; height:40px; display: flex;  align-items: center; border: 1px solid black;padding-left: 22px"> 

    <input type="checkbox">
    <span id="text">TEXTTEXTTEXTTEXT</span>
    </div>
1 голос
/ 20 февраля 2020 

div{
    display: flex;
    justify-content: center;
    align-items: center;
    resize: both;
}
<style>
    input[type=checkbox] {
        cursor: pointer;
        font-size: 17px;
        visibility: hidden;
        transform: scale(1.2);
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        resize: both;
    }

    input[type=checkbox]:after {
        content: " ";
        background-color: #fff;
        display: inline-block;
        color: #00BFF0;
        width: 14px;
        height: 18px;
        visibility: visible;
        border: 1px solid #FFF;
        padding: 0 3px;
        margin: 2px 0;
        border-radius: 8px;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.09), 0 0 2px 0 rgba(0,0,0,0.18);
    }

    input[type=checkbox]:checked:after {
        content: "\2714";
        display: unset;
        font-weight: bold;
    }

    </style>

    <div style="display:inline-block; height:40px; display: flex;  align-items: center; border: 1px solid 
    black;"> 

    <input type="checkbox">
    <span id="text">TEXTTEXTTEXTTEXT</span>
    </div>
0 голосов
/ 20 февраля 2020

Пожалуйста, обновите "input [type = checkbox]: после" в CSS, вы должны установить display: block, height: 14px и margin: 0. Я добавил фрагмент ниже, обновите ниже CSS код в вашем файле и попробуйте: 

input[type=checkbox]:after {
 content: " ";
 background-color: #fff;
 display: block;
 color: #00BFF0;
 width: 14px;
 height: 14px;
 visibility: visible;
 border: 1px solid #FFF;
 padding: 0 3px;
 margin: 0;
 border-radius: 8px;
 box-shadow: 0 0 15px 0 rgba(0,0,0,0.09), 0 0 2px 0 rgba(0,0,0,0.18);}
...