Html 如何在eCSS中将复选框与其标签垂直对齐

是否有任何方法可以在MaterializeCSS中垂直对齐（居中）复选框及其标签我希望复选框相对于蓝色框垂直居中。如果您将materialize从fiddle中移除，并使用普通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>

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

---

您必须将

top:50%

和一些负边距（元素高度的一半）设置为标签的

：before

和

：after

伪类

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