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

WFTsai

我正在使用开关,并且由于实际标签很宽,所以我想破坏每个标签部分。问题是我找不到打破它的方法以使其与switch窗口小部件对齐。

我试图与<br>换行<br/>我也尝试过输入文字,<p> ... </p>但是也没有用。我使用的代码如下:

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

我想在右侧的绿色框中而不是在红色框中获得类似的内容,请参见下图:

在此处输入图片说明

换句话说,每个标签应位于开关的中心。

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

nhannt210695

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章