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

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

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

Center each label around a switch that has two or more lines

javascript

html

switch-statement

materialize

text-align