How to align input element in the middle of div? [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 7 years ago.
For below html code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customername {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
}
.customername {
height: 5%;
}
.customername {
margin-top: 5px;
}
.shoppingform > div > input {
border-radius: 5px;
width: 60%;
}
.formlabel {
display: inline-block;
width: 30%;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step1: Your details
<br>
<div class="customername">
<label class="formlabel">Name:</label>
<input type="text">
</div>
</form>
There are multiple div elements(like customername), which above code does not have,to make question simple.
label and input text are towards top side of the div container.
How do I vertically align the label and input text in the middle of the div container? To add, there are multiple div elements in the form.

Answer 1

Modified your code a little to have your elements vertically aligned as suggested.
However I do advice you to think about your element positioning better, this form will likely not be good in terms of responsive behavior and layout.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
text-align: center;
}
.customername {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
}
.customername {
height: 5%;
}
.customername {
margin-top: 5px;
}
.shoppingform > div > input {
border-radius: 5px;
width: 60%;
}
.formlabel {
display: inline-block;
width: 30%;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step1: Your details
<br/>
<div class="customername">
<label class="formlabel">Name:</label>
<br/>
<input type="text">
</div>
</form>

Answer 2

.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
padding-left: 15px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
padding-top: 47.5%;
}
.customername {
margin: auto;
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
height: 5%;
margin-top: 5px;
}
.shoppingform > div > input {
border-radius: 5px;
width: 60%;
}
.formlabel {
display: inline-block;
width: 30%;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step1: Your details
<br>
<div class="customername">
<label class="formlabel">Name:</label>
<input type="text">
</div>
</form>