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

59down votefavorite 20

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) ? css html vertical-alignment shareimprove this question edited Jan 14 '11 at 15:51 Marc-François 2,38911839 asked Dec 17 '10 at 0:05 Misha Moroshko 53.3k162391624

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  add a comment

7 Answers

activeoldestvotes

up vote79down voteaccepted

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 edited Dec 17 '10 at 1:21 answered Dec 17 '10 at 0:14 Marc-François 2,38911839

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 show 9 more comments

up vote30down vote

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> Expand snippet 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> Expand snippet 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> Expand snippet shareimprove this answer edited May 11 '17 at 3:52 answered Oct 9 '16 at 3:36 Holger Will 3,44511625

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 add a comment

up vote9down vote

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 edited Mar 17 '13 at 18:23 vascowhite 14.5k74564 answered Dec 17 '10 at 1:48 albert 7,04033053

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  add a comment

up vote8down vote

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 answered Dec 27 '12 at 18:32 MusikAnimal 1,03611223

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

up vote6down vote

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 answered Dec 17 '10 at 0:20 Gaby aka G. Petrioli 138k20180237

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 add a comment

up vote3down vote	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 answered Dec 17 '10 at 0:14 Trevor 8,58012337
	add a comment

up vote1down vote

You can use display: table-cell property as in the following code: div { height: 100%; display: table-cell; vertical-align: middle; } shareimprove this answer edited Oct 27 '15 at 10:34 Luca Detomi 2,76662844 answered Oct 27 '15 at 9:25