CODEWITHSUNDEEP
htmlcssflexbox
alex
alex

Reputation: 7611

How do I vertically align the following flex element?

I have a simple flex setup:

.col-12 {
  display: flex
}

input {
  flex: 0 0 80%
}

label {
  flex: 0 0 20%
}
<div class="col-12">
  <label>Label</label>
  <input type="text" value=""></input>
</div>

However, the label isn't aligned vertically:

enter image description here

I tried vertical-aligment: middle but Message stayed in the same place.

What's the correct way to do this?

Upvotes: 1

Views: 29

Answers (1)

hungerstar
hungerstar

Reputation: 21725

You need to use align-items property with the value center:

align-items: center;

Here's a link that I often refer to when I need a refresher and some examples when it comes to flexbox: A Visual Guide to CSS3 Flexbox Properties.

.col-12 {
  display: flex;
  align-items: center;
}

input {
  height: 36px;
  flex: 0 0 80%
}

label {
  flex: 0 0 20%
}
<div class="col-12">
  <label>Label</label>
  <input type="text" value="">
</div>

PS <input>s don't have a closing tag, they're void elements. Sometimes referred to as empty elements.

Upvotes: 4

Related Questions