I Want my Label to Vertically Align With my Input Field - html

Question

Here is what my work is so far:
http://jsfiddle.net/2RCBQ/
<div id="main">
<form>
<label>First Name:<input type="text" id="firstname"></label><br/>
<label>Last Name:<input type="text" id="lastname"></label><br>
<label>E-Mail:<input type="text" id="email"></label><br/>
<label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
width:250px;
display: block;
}
Currently, the label (on the left) is kind of towards to top of the input field (on the right). I want to vertically align them so the label since in the middle of the input field.
I've tried vertical-align and it does not work. Please help me try to figure out the problem. Thanks.

Answer 1

I feel nesting <span> adds a lot of unnecessary markup.
display: inline-block lets the <label> and <input> sit next to each other just like with float: right but without breaking document flow. Plus it's much more flexible and allows more control over alignment if you (or the user's screen reader) want to change the font-size.
Edit: jsfiddle
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}
label {
color: #2D2D2D;
font-size: 15px;
}
form, input {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
form {
width: 300px;
}
<form>
<label for="firstname">First Name:</label><input type="text" id="firstname">
<label for="lastname">Last Name:</label><input type="text" id="lastname">
<label for="email">E-Mail:</label><input type="text" id="email">
<label for="phone">Phone:</label><input type="text" id="phone">
</form>

Answer 2

You can use flexbox css to vertical align.
Just wrap the parent element display-flex.
.display-flex {
display: flex;
align-items: center;
}

Answer 3

html:
I add span in your label so we can add style specific for the text label:
<div id="main">
<form>
<label><span>First Name:</span><input type="text" id="firstname"></label><br/>
<label><span>Last Name:</span><input type="text" id="lastname"></label><br>
<label><span>E-Mail:</span><input type="text" id="email"></label><br/>
<label><span>Phone:</span><input type="text" id="phone"></label><br/>
</form>
</div>
css:
#main label span {
position:relative;
top:2px;
}
demo

Answer 4

You can enclose the <label> elements in a span and set the span's vertical-align to middle
HTML
<div id="main">
<form> <span><label>First Name:<input type="text" id="firstname" /></label></span>
<br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span>
<br/> <span><label>E-Mail:<input type="text" id="email" /></label></span>
<br/> <span><label>Phone:<input type="text" id="phone" /></label></span>
<br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
}
#main span {
display: table-cell;
vertical-align: middle;
width:250px;
}
http://jsfiddle.net/2RCBQ/2/

Answer 5

I think that the following is the only method that works for all input types.
label { display: flex; align-items: center; }
input { margin: 0; padding: 0; }
<label><input type="checkbox"> HTML</label>
<label><input type="radio"> JS</label>
<label>CSS <input type="text"></label>
<label>Framework
<select><option selected>none</option></select>
</label>
I put because it seems to be the simplest way to align different input types; however, margins work just fine.

Answer 6

I know this is a super-old post, but I feel that the answers mix things and come to different solutions.
The original author asked about the label text's vertical alignment of implicit labelling; some answers solve this by using explicit labelling. I think this was not asked for.
See the difference between implicit vs. explicit labelling here: https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-an-input
As I'm confronted every now and then I'd like to share my solution for implicit labelling.
The problem at explicit labelling is easily solved, since then you have your label as its own box and can apply any CSS of your liking to it rather independent of the associated input field.
However, at implicit labelling, the situation is different, since then the label text and the input are not separated items in this box. I think you do not have any other choice but to add a span around the text if you want to address the text independently from the input (note: you may not use a div here. Inside a label, only phrasing content elements are allowed: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content and div is not.)
This is what https://stackoverflow.com/a/15193954/8754067 stated above correctly, but the answer is lacking the dichotomy between implicit and explicit labelling. And has been not up-voted enough (at least in my personal view). Therefore, I feel the need to stress this again here.
form {
width: 400px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
form label {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 0.5rem;
min-width: 100%;
font-size: 15px;
/* increase height to see effect. */
height: 3rem;
}
form label span {
margin-block: auto;
}
<form>
<label><span>First Name (middle):</span><input type="text" id="firstname"></label>
<label><span>Last Name (middle):</span><input type="text" id="lastname"></label>
<label>E-Mail (default):<input type="text" id="email"></label>
<label>Phone (default):<input type="text" id="phone"></label>
</form>