Сосредоточьте каждую метку вокруг переключателя, который имеет две или более линий - PullRequest
Новая
       24

Сосредоточьте каждую метку вокруг переключателя, который имеет две или более линий

3 голосов
/ 27 апреля 2019

Я работаю с переключателем, и поскольку фактическая метка широка, я хочу разбить каждую помеченную деталь.Проблема в том, что я не могу найти способ сломать его так, чтобы он совпал с виджетом переключателя.

Я попытался создать новую строку с <br> и <br/>.Я также попытался поместить текст в <p> ... </p>, но он также не работал.Код, который я использовал, следующий: 

<div class="switch">
  <label>
    Off <br/> 0
    <input type="checkbox">
    <span class="lever"></span>
    On <br/> 1
  </label>
</div>

Я хочу получить что-то вроде в правом зеленом поле, а не в красном поле, см. Ссылку:

enter image description here

Другими словами, каждая метка должна быть центрирована вокруг коммутатора.

Код и результат также можно увидеть на codepen .

1 Ответ

4 голосов
/ 27 апреля 2019

HTML 

<div class="switch">
    <label>
      <div class="nhannt210695">
             Off <br/> 0
              <input type="checkbox">
              <span class="lever"></span>
              On <br/> 1
      </div>
    </label>
  </div>

CSS 

.nhannt210695 {
  display: flex;
  justify-content: center;
  align-items: center;
}

jQuery 

$(document).ready(function() {
  $("input").change(function() {
    if($(this).is(":checked")) {
      console.log("Is checked");
    }
    else {
      console.log("Is Not checked");
    }
  })
});
...