将每个标签置于具有两条或更多条线的开关周围

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