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

shareimprove this question
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 '10 at 0:07 
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/

shareimprove this answer
1 
looks elegant :) does anyone know how browser compatible this method is? – Zaven Nahapetyan Dec 17 '10 at 0:25
1 
For IE, I think it only works on IE8 or better. For the other web browsers it's fine. – Marc-François Dec 17 '10 at 0:34
1 
I didn't know about the display: table-cell. Is that supported on certain browsers? – BeemerGuy Dec 17 '10 at 0:41
5 
@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 '10 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 '13 at 20:36

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 placholder="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>

shareimprove this answer
   
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. – Kevin Scharnhorst Mar 9 '17 at 16:20
   
it works if label and text are seperate elements, or if your make your lable a flexbox too... – Holger Will Mar 11 '17 at 16:05 
   
This worked for me! Great examples too! – Tony Dec 5 '17 at 16:44

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>
shareimprove this answer
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 '13 at 7:33
11 
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 '13 at 8:23
1 
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 '16 at 1:28 

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!

shareimprove this answer
1 
But won't work if the label text is greater than one line – GlennG Jun 10 '14 at 13:31

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

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

shareimprove this answer
   
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 '10 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 '12 at 17:55

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;
shareimprove this answer

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

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


'WEB > CSS' 카테고리의 다른 글

[CSS]크로스 브라우징  (0) 2018.01.24
CSS background Property ❮ PreviousComplete CSS Reference Next ❯  (0) 2018.01.24
[CSS]text-indent  (0) 2018.01.18
[CSS] Background Image Size handling  (0) 2018.01.17
CSS Layout - Horizontal & Vertical Align  (0) 2018.01.16

+ Recent posts