Question

有没有办法在MaterialiseCSS中垂直对齐（居中）一个复选框及其标签？ This fiddle demonstrates the issue - 我希望复选框相对于蓝框垂直居中。如果你从小提琴中删除了物质，并使用了香草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%和一些负边距（元素高度的一半）设置为标签的:before和:after伪类。

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

<强> Updated Fiddle

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

1 个答案: