Vertically align input when using Flexbox [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
How do I get the input box to be vertically aligned to the middle? I tried adding vertical-align: "middle" to a few places but I am not getting any success. I feel like flexbox is a part of the problem here?
.container {
/* Flex Properties */
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.item {
background-color: orange;
}
label {
width: 100px;
display: inline-block;
}
<div class="container">
<div class="item">
<label>Gee my iefwaf fwats: </label>
<input>
</div>
</div>

Answer 1

Give the .item div display: flex and align-items: center, since it's the parent of the input element:
.container {
/* Flex Properties */
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.item {
display: flex; /* added */
align-items: center; /* added */
background-color: orange;
}
label {
width: 100px;
/*display: inline-block; not necessary*/
}
<div class="container">
<div class="item">
<label>Gee my iefwaf fwats: </label>
<input type="text">
</div>
</div>

Answer 2

Try this css code with your html.
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.item {
background-color: orange;
display: flex;
align-items: center;
}
label {
width: 100px;
display: inline-block;
}
input {
display: inline-block;
}

Answer 3

Please check with the added CSS::
.container {
/* Flex Properties */
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.item {
background-color: orange;
}
label {
width: 100px;
display: inline-block;
vertical-align: middle;
}
input {
width: 100px;
display: inline-block;
vertical-align: middle;
}
<div class="container">
<div class="item">
<label>Gee my iefwaf fwats: </label>
<input>
</div>
</div>