107

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

1
  • 1
    To my knowledge, the bottom line is "you can't", and the laziest way around it is to use a simple <table> and apply valign='middle' to its <td> s.
    – BeemerGuy
    Dec 17, 2010 at 0:07

7 Answers 7

108

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/

12
  • 1
    looks elegant :) does anyone know how browser compatible this method is? Dec 17, 2010 at 0:25
  • 1
    For IE, I think it only works on IE8 or better. For the other web browsers it's fine. Dec 17, 2010 at 0:34
  • 1
    I didn't know about the display: table-cell. Is that supported on certain browsers?
    – BeemerGuy
    Dec 17, 2010 at 0:41
  • 7
    @Misha you should have specified the fact that your input / label were absolutely positioned. That totally changes the circumstances of the question. I am giving Marc a +1. Great answer.
    – jessegavin
    Dec 17, 2010 at 1:16
  • 2
    I'm fairly certain the point jenson was trying to make (and should have articulated) is that using display: table-cell makes divs behave in ways they aren't expected to behave in, such as subsequent divs rendering on the same line/etc.
    – taswyn
    Nov 1, 2013 at 20:36
90

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>

3
  • I wish this would work when there is an image and text wrapped in the label. I have a small icon followed by text, but the text doesn't budge. Mar 9, 2017 at 16:20
  • it works if label and text are seperate elements, or if your make your lable a flexbox too... Mar 11, 2017 at 16:05
  • display:flex has less compatibility , works on chrome 29+
    – user5490177
    Dec 17, 2019 at 10:06
15

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>
3
  • 3
    This obviously won't work for a two line label. And if you are sure that label is always single line, than there are millions of other alternatives.
    – Lashae
    Apr 18, 2013 at 7:33
  • 18
    the question was in regards to a single line label, and i answered accordingly. not sure about your point(s) or intentions here, but if x is so obvious you should go make a million examples of it. at the very least so you can gloat under my answer and feel the power of your million victories. bravo.
    – albert
    Apr 18, 2013 at 8:23
  • 2
    This is the best answer for single line labels. The specification says: "If the for attribute is not specified, but the label element has a labelable form-associated element descendant, then the first such descendant in tree order is the label element's labeled control." Therefore this is the only approach where you can omit the for and id attributes for maximum simplicity.
    – parliament
    Apr 9, 2016 at 1:28
8

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!

0
7

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

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

2
  • That doesn't work on the jsfiddle. I changed the height of the div and the content inside didn't move at all. Am I missing something?
    – BeemerGuy
    Dec 17, 2010 at 0:39
  • In my opinion, layouts shouldn't have fixed pixel heights… Layouts should flow fluidly around the content. However, I come from a day and time when browsers scaled text sizes when zooming in and out. Recent browsers actually scale the whole page, so setting pixel heights works a little better. However, there are whole new reasons to avoid setting pixel heights… for example, responsive layout techniques. That's why this would be my preferred method.
    – thirdender
    Jun 26, 2012 at 17:55
3

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;
0

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

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.