将每个标签围绕两行或多行的开关居中

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