CSS: How to align vertically a “label” and “input” inside a “div”?

Question

Consider the following code :

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

What would be the easiest method to put the label and the input in the middle of the div (vertically) ?

Answer 1

 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/

Answer 2

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> 

Answer 3

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>

Answer 4

I'm aware this question was asked over two years ago, but for any recent viewers, here's an alternative solution, which has a few advantages over Marc-François's solution:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

Here we simply only add a line-height equal to that of the height of the div. The advantage being you can now change the display property of the div as you see fit, to inline-block for instance, and it's contents will remain vertically centered. The accepted solution requires you treat the div as a table cell. This should work perfectly, cross-browser.

The only other advantage being it's just one more CSS rule instead of two :)

Cheers!

Answer 5

Use padding on the div ( top and bottom ) and vertical-align:middle on the label and input .

example at http://jsfiddle.net/VLFeV/1/

Answer 6

Wrap the label and input in another div with a defined height. This may not work in IE versions lower than 8.

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Answer 7

You can use display: table-cell property as in the following code:

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }