CODEWITHSUNDEEP
csshtmlvertical-alignment
Misha Moroshko
Misha Moroshko

Reputation: 171351

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) ?

Upvotes: 109

Views: 380273

Answers (7)

Holger Will
Holger Will

Reputation: 7526

A more modern approach would be to use CSS flexbox:

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 multiple 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>

It's 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>

Upvotes: 92

Marc-Fran&#231;ois
Marc-Fran&#231;ois

Reputation: 4050

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/

Upvotes: 109

abahet
abahet

Reputation: 10623

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

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

Upvotes: 0

albert
albert

Reputation: 8153

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>

Upvotes: 16

MusikAnimal
MusikAnimal

Reputation: 2416

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!

Upvotes: 8

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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

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

Upvotes: 7

uadnal
uadnal

Reputation: 11435

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;

Upvotes: 3

Related Questions