CSS How to align vertically a label and input inside a div

Question

Consider the following code   HTML    lt div gt       lt label for  name  gt Name  lt  label gt       lt input type  text  id  name    gt   lt  div gt    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

User · Answer

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    lt label for  name  gt Name   lt input type  text  id  name    gt  lt  label gt

User · Answer

You can use display  table-cell property as in the following code   div        height  100        display  table-cell        vertical-align  middle

User · Answer

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

User · Answer

x000D   x000D  div   x000D      display  table-cell  x000D      vertical-align  middle  x000D      height  50px  x000D      border  1px solid red  x000D    x000D   lt div gt  x000D       lt label for  name  gt Name  lt  label gt  x000D       lt input type  text  id  name    gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

a more modern approach would be to use css flex-box    x000D   x000D  div   x000D    height  50px  x000D    background  grey  x000D    display  flex  x000D    align-items  center x000D    x000D   lt div gt  x000D     lt label for  name  gt Name  lt  label gt  x000D     lt input type  text  id  name    gt  x000D   lt  div gt  x000D   x000D   x000D    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      x000D   x000D  div   x000D    display  flex  x000D    align-items  center x000D    x000D   x000D      x000D    margin  10px x000D    x000D   x000D  label   x000D    align-self  flex-start x000D    x000D   lt div gt  x000D     lt img src  https   de gravatar com userimage 95932142 195b7f5651ad2d4662c3c0e0dccd003b png size 50    gt  x000D     lt label gt Text lt  label gt  x000D     lt input placeholder  Text  type  text    gt  x000D   lt  div gt  x000D   x000D   x000D    its also super easy to center horizontally and vertically    x000D   x000D  div   x000D    position absolute  x000D    top 0 left 0 right 0 bottom 0  x000D    background  grey  x000D    display  flex  x000D    align-items  center  x000D    justify-content center x000D    x000D   lt div gt  x000D     lt label for  name  gt Name  lt  label gt  x000D     lt input type  text  id  name    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use padding on the div  top and bottom  and vertical-align middle on the label and input   example at http   jsfiddle net VLFeV 1

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

Examples related to css

Examples related to html

Examples related to vertical-alignment