javascript - 将每个标签置于具有两行或更多行的开关周围

Question

我正在使用开关，因为实际标签很宽，所以我想打破每个标签部分。问题是我找不到一种方法来打破它，使其与开关小部件对齐。

我尝试用 <br> 换行和 <br/> .我还尝试将文本放在 <p> ... </p> 中但它也没有用。我使用的代码如下:

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

我想得到的是右边绿框中的东西，而不是红框中的那个，见下图:

换句话说，每个标签都应该以开关为中心。

代码和结果也可以在codepen上看到.

Answer 1

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");
    }
  })
});