Vertical center an absolutely positioned input field inside its surrounding element - html

Question

I simply want to vertically center an input field inside its surrounding DIV, but at the same time all input fields on the page should be horizontally aligned with each other (should have the same left value, if you will).
Here's an example page of the problem:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.inputClass {
position: absolute;
left: 25%;
/* top: 50%; transform: translate(0, -50%); */
/* not working as I need */
vertical-align: middle;
}
<div class="wrapper">
<div>
<div>
Some text
<input type="text" class="inputClass" />
</div>
<div>
Some more text
<input type="text" class="inputClass" />
</div>
</div>
</div>
Desired result (blue rim by Firebug):

Answer 1

You can group inputs+labels in fieldsets and then use the labels for moving the inputs towards the center,
try this:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
fieldset {
border: 0;
/*resets UA*/
}
/*can use label to move inputs right*/
label {
width:40%;
display:inline-block;
padding-right :15px;
text-align:right
}
<div class="wrapper">
<div>
<fieldset>
<label for='one'>Some text</label>
<input id='one' type="text" class="inputClass" />
</fieldset>
<fieldset>
<label for='two'>Some more text</label>
<input id='two' type="text" class="inputClass" />
</fieldset>
</div>
</div>

Answer 2

Put the text in a label (this is good practice anyway) and use inline block to position the elements beside each other. You can then give the label a width as required:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.wrapper label {
display:inline-block;
width:25%;
vertical-align:middle;
}
.wrapper input {
display:inline-block;
vertical-align:middle;
}
<div class="wrapper">
<div>
<div>
<label for="field1">Some text</label>
<input id="field1" type="text" class="inputClass" />
</div>
<div>
<label for="field2">Some more text</label>
<input id="field2" type="text" class="inputClass" />
</div>
</div>
</div>

Answer 3

An excellent way to do this (in my opinion) would be using the table tag in HTML to organise the input fields and the labels. I would then use the "valign" property and set it to "TOP" e.g.
<table>
<tr>
<td valign="TOP">
Some text
</td>
<td valign="TOP">
<input type="text" class="inputClass" />
</td>
</tr>
<tr>
<td valign="TOP">
Some more text
</td>
<td valign="TOP">
<input type="text" class="inputClass" />
</td>
</tr>
</table>
The valign="TOP" assigned to the TD will make it be at the top of the cell in the table. This will ensure that they will be vertically and horizontally aligned with each other.

Answer 4

Another answer without using the table tag:
<style>
li {
width: 120px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
<ul class="list-inline">
<li>Some text</li>
<li>
<input type="text">
</li>
</ul>
<ul class="list-inline">
<li>Some more text</li>
<li>
<input type="text">
</li>
</ul>
</div>
This would be used using BootStrap in order to list it in line.

Answer 5

A possible solution would be to put all the form labels in a div with class "col-left" & the input fields in a div with class "col-right". Both these are vertically middle aligned (vertical-align: middle) & the left column holding the labels have an equal width setting.
Please find below the complete solution:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.col-left, .col-right {
vertical-align: middle;
display:inline-block;
}
.col-left {
width: 20%;
}
<div class="wrapper">
<div>
<div class="col-left">Some text</div>
<div class="col-right">
<input type="text" class="inputClass" />
</div>
</div>
<div>
<div class="col-left">Some more text</div>
<div class="col-right">
<input type="text" class="inputClass" />
</div>
</div>
</div>