How to align input element in the middle of div?

Question

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.

you mean align vertically? label and input verticaled aligned inside the "customerme" or "customerme" div aligned vertically from "shppingform?. Right atm it's not clear at all what you want. — Alvaro Menéndez, Nov 24 '15 at 15:14
@AlvaroMenéndez Only label and input verticaled aligned inside the "customername" — overexchange, Nov 24 '15 at 15:17
easieast way may be to add `line-height` to customername if there's just going to be a single line. in your example something like `line-height: 2.9;` — Alvaro Menéndez, Nov 24 '15 at 15:19
@magreenberg Without extra `div`, can't we do that? This would be maintenance issue. I need to modify every `div` element in the `form` — overexchange, Nov 24 '15 at 15:20
@overexchange Of course you can, just apply the styles to the elements them selves instead of the extra div. I just did that since it was quickest in my head. — mattdevio, Nov 24 '15 at 15:23
@magreenberg Looks good. you already said `top:50%`. Is this not redundant to say `translatey(-50%)`? — overexchange, Nov 24 '15 at 15:32
with top:50% you move the origin of your div (the top part) to the center of the container... with translatey(-50%) you move up half the div height over its own axis. so the result is a perfect centered element — Alvaro Menéndez, Nov 24 '15 at 15:35
@overexchange Look at what Alvaro said. They work in conjunction to create the effect. — mattdevio, Nov 24 '15 at 15:38
@magreenberg I wish you could provide this as an answer, instead of a comment. Awesome. I checked it [here](http://jsfiddle.net/4geph4d9/2/). Thank you so much — overexchange, Nov 24 '15 at 15:45
@AlvaroMenéndez For using `top`, I need `position` property. Does element need to have `position` property to use `translateY()`? — overexchange, Nov 24 '15 at 15:50
@AlvaroMenéndez you mean element with `position:static`(default) would also works. — overexchange, Nov 24 '15 at 15:54
@overexchange [Join me in chat](http://chat.stackoverflow.com/rooms/96048/magreenberg) — mattdevio, Nov 24 '15 at 15:56

score 2 · Answer 1 · answered Nov 24 '15 at 15:20

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>

Alexander Elgin · Answer 2 · 2015-11-24T15:20:53.680

.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>

How to align input element in the middle of div?

2 Answers2