I Want My Label To Vertically Align With My Input Field

Question

Here is what my work is so far: http://jsfiddle.net/2RCBQ/

Solution 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><labelfor="firstname">First Name:</label><inputtype="text"id="firstname"><labelfor="lastname">Last Name:</label><inputtype="text"id="lastname"><labelfor="email">E-Mail:</label><inputtype="text"id="email"><labelfor="phone">Phone:</label><inputtype="text"id="phone"></form>

Solution 2:

You can use flexbox css to vertical align.

Just wrap the parent element display-flex.

.display-flex {
    display: flex;
    align-items: center;
}

Solution 3:

html:

I add span in your label so we can add style specific for the text label:

<divid="main"><form><label><span>First Name:</span><inputtype="text"id="firstname"></label><br/><label><span>Last Name:</span><inputtype="text"id="lastname"></label><br><label><span>E-Mail:</span><inputtype="text"id="email"></label><br/><label><span>Phone:</span><inputtype="text"id="phone"></label><br/></form></div>

css:

#mainlabelspan {
    position:relative;
    top:2px;
}

demo

Solution 4:

You can enclose the <label> elements in a span and set the span's vertical-align to middle

HTML

<divid="main"><form><span><label>First Name:<inputtype="text"id="firstname" /></label></span><br/><span><label>Last Name:<inputtype="text"id="lastname" /></label></span><br/><span><label>E-Mail:<inputtype="text"id="email" /></label></span><br/><span><label>Phone:<inputtype="text"id="phone" /></label></span><br/></form></div>

CSS

#main {
    width:300px;
}
#maininput {
    float:right;
    display:inline;
}
#mainlabel {
    color: #2D2D2D;
    font-size: 15px;
}
#mainspan {
    display: table-cell;
    vertical-align: middle;
    width:250px;
}

http://jsfiddle.net/2RCBQ/2/

Solution 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><inputtype="checkbox">&nbsp; HTML</label><label><inputtype="radio">&nbsp; JS</label><label>CSS &nbsp;<inputtype="text"></label><label>Framework &nbsp;<select><optionselected>none</option></select></label>

I put   because it seems to be the simplest way to align different input types; however, margins work just fine.

Html5 Guru