Misha Moroshko Misha Moroshko - 1 month ago 7
CSS Question

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

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
div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

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/