如何在MaterializeCSS中將復選框與其標簽垂直對齊

Question

有沒有辦法在MaterializeCSS中垂直對齊（居中）復選框及其標簽？ 這個小提琴演示了這個問題 -我希望復選框相對於藍色框垂直居中。 如果您從小提琴中刪除實物並使用香草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;
}

Answer 1

您必須將top:50%和一些負邊距（ 元素高度的一半 ）設置為label的:before和:after偽類。

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

更新小提琴