CSS: How to align vertically a "label" and "input" inside a "div"?
This works cross-browser, provides more accessibility and comes with less markup. ditch the div. Wrap the label
label{
display: block;
height: 35px;
line-height: 35px;
border: 1px solid #000;
}
input{margin-top:15px; height:20px}
<label for="name">Name: <input type="text" id="name" /></label>
a more modern approach would be to use css flex-box.
div {
height: 50px;
background: grey;
display: flex;
align-items: center
}<div>
<label for='name'>Name:</label>
<input type='text' id='name' />
</div>a more complex example... if you have multible elements in the flex flow, you can use align-self to align single elements differently to the specified align...
div {
display: flex;
align-items: center
}
* {
margin: 10px
}
label {
align-self: flex-start
}<div>
<img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
<label>Text</label>
<input placeholder="Text" type="text" />
</div>its also super easy to center horizontally and vertically:
div {
position:absolute;
top:0;left:0;right:0;bottom:0;
background: grey;
display: flex;
align-items: center;
justify-content:center
}<div>
<label for='name'>Name:</label>
<input type='text' id='name' />
</div>div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}<div>
<label for='name'>Name:</label>
<input type='text' id='name' />
</div>The advantages of this method is that you can change the height of the div, change the height of the text field and change the font size and everything will always stay in the middle.
http://jsfiddle.net/53ALd/6/