vertical-align doesn't work

Question

I have a following example: https://jsfiddle.net/er322dLL/

.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-input {
    vertical-align: middle;
}

<div class="container alert-info alert">

  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>

</div>

Even if I used vertical-align, my checkbox is still not aligned properly. I found out, that when I add position:relative it works, but still I don't understand why. Can anyone tell me why it's necessary to add this propery. I'm quite new to CSS/HTML and probably don't understand it at all.

Answer 1

vertical-align is a slightly misnamed property and it's only vertically aligning inline elements, not blocks like you're probably expecting.

See this codepen I put together: https://codepen.io/staypuftman/pen/OXzNRj

Broadly, there are two kinds of HTML elements: block-level elements and inline elements. You define them with display: block; and display: inline. Where beginners get confused is that they don't realize every element already has a display orientation defined by the browser.

The elements you are using, like <div>, <section>, etc are predefined as blocks, but some like <label> are inline. So you'd have to first make all of your element inline elements, but you'd find that doesn't work very well either.

The main way to do layouts in 2018 is with flexbox, which controls alignment on two axes very tightly. The main axis is controlled by the justify-content property and the secondary axis is controlled by the align-items property. By default, flexbox is oriented into rows so vertical control is handled with align-items: center; most of the time.

You set the display: flex; and the align-items: center properties on the container which contains the objects you're trying to vertically center. In your case thats <label class="form-check-input">, so the code would be:

.form-check-input {
   display: flex;
   align-items: center;
}