Search code examples
htmlcsscheckboxmaterialize

How to vertically align a checkbox with its label in MaterializeCSS

Is there any way to vertically align (center) a checkbox and its label in MaterializeCSS? This fiddle demonstrates the issue - I'd like the checkbox to be vertically centered relative to the blue box. If you remove materialize from the fiddle and use vanilla HTML/CSS it works.

Thank you!!

Materialize version: 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;
}
Solution

  • You have to set top:50% and some negative margin(half of the element height) to the :before and :after pseudo class of label.

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

    Updated Fiddle