How to align vertically a “label” and “input” inside a “div” with CSS?

Spread the love

To align vertically a "label" and "input" inside a "div" with CSS, we use flexbox.

For instance, we write

<div>
  <label for="name">Name:</label>
  <input type="text" id="name" />
</div>

to add a label and input.

Then we write

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center;
}

to make the div a flex container with display: flex;

Then we vertically center the items in the div with align-items: center;.