如何在 MaterializeCSS 中将复选框与其标签垂直对齐答案

【问题标题】：How to vertically align a checkbox with its label in MaterializeCSS如何在 MaterializeCSS 中将复选框与其标签垂直对齐
【发布时间】：2018-07-02 14:13:47
【问题描述】：

有没有办法在 MaterializeCSS 中垂直对齐（居中）复选框及其标签？ This fiddle demonstrates the issue - 我希望复选框相对于蓝色框垂直居中。如果您从小提琴中删除 materialize 并使用 vanilla HTML/CSS 它可以工作。

谢谢！！

具体化版本： 0.100.2

HTML：

<form>
  <div>
    <input id="myinput" type="checkbox" />
    <label for="myinput">
      <div class="label-content">         
      Label Text
      </div></label>
  </div></form>

CSS：

label {
  display:inline-block;
  vertical-align:middle;
}
.label-content {
   height:100px;
   background-color:aliceblue;
   border: 1px solid blue;
}

【问题讨论】：

标签： html css checkbox materialize

【解决方案1】：

您必须将top:50% 和一些负边距（元素高度的一半）设置为:before 和:after 伪类标签。

.parent [type="checkbox"]+label:before,
.parent [type="checkbox"]:not(.filled-in)+label:after {
  top: 50%;
  margin-top: -9px;
}

Updated Fiddle

【讨论】：