Vertically align text within input field of fixed-height without display table or padding

Question

The line-height property usually takes care of vertical alignment  but not with inputs  Is there a way to automatically center text without playing around with padding

User · Answer

In my opinion  the answer on this page with the most votes is the best answer  but his math was wrong and I couldn t comment on it   I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around   Of course I wanted the text vertically aligned in the center in all browsers   1 pixel border top 1 pixel border bottom 8 pixel top padding 8 pixel bottom padding 22 pixel font size  1   1   8   8   22   40 pixels exactly   One thing to remember is that you must remove your css height property or those pixels will get added to your total above    lt input type  text  style  padding-top 8px  padding-bottom 8px  margin  0  border  solid 1px  000000  font-size 22px     gt    This is working in Firefox  Chrome  IE 8  and Safari   I can only assume that if something simple like this is working in IE8  it should work similarly in 6  7  and 9 but I have not tested it  Please let me know and I ll edit this post accordingly

User · Answer

Late to the party  but the current answers won t work if you have box-sizing  border-box set  which a lot of people do for form elements these days    Just reset the box sizing for IE8 to box-sizing  content-box  then use one of the padding   height answer

User · Answer

The inner vertical alignment will depend on font height and input height  so  it can be adjusted using padding       Try some like     InVertAlign      height  40px     line-height  40px     font-size  2em     padding  0px 14px 3px 5px            lt input type  text  class  InVertAlign    gt    Remember to adjust the values on css class according to your needs

User · Answer

Go for line-height   The vertical-align tag works fine for the submit button but not for the text in the input field  Setting line-height to the height of the input field works on all browsers  Incl IE7

User · Answer

I ran into this problem myself   I found that not specifying an input height  but using the font-height and padding combined  results in vertically aligned text   For instance  lets say you want to have a 42px tall input box  with a font-size of 20px   You could simply find the difference between the input height and the font-size  divide it by two  and set your padding to that amount   In this case  you would have 22px total worth of padding  which is 11px on each side    lt input type  text  style  padding  11px 0px 11px 0px  font-size  20px     gt    That would give you a 42px tall input box with perfect vertical alignment   Hope that helps

User · Answer

After much searching and frustration a combo of setting height  line height and no padding worked for me when using a fixed height  24px  background image for a text input field    form-text       color  white      outline  none      background-image  url input text png       border-width  0px      padding  0px 10px 0px 10px      margin  0px      width  274px      height  24px      line-height  24px      vertical-align  middle

User · Answer

Late to the party  but the current answers won t work if you have box-sizing  border-box set  which a lot of people do for form elements these days    Just reset the box sizing for IE8 to box-sizing  content-box  then use one of the padding   height answer

User · Answer

In Opera 9 62  Mozilla 3 0 4  Safari 3 2  for Windows  it helps  if you put some text or at least a whitespace within the same line as the input field    lt div style  line-height  60px  height  60px  border  1px solid black   gt       lt input type  text  value  foo    gt  amp nbsp   lt  div gt     imagine an  amp nbsp after the input-statement   IE 7 ignores every CSS hack I tried  I would recommend using padding for IE only  Should make it easier for you to position it correctly if it only has to work within one specific browser

User · Answer

Try    height  21px  line-height  21px     FOR IE      Because on some versions of IE   lt  9  the property height is not properly interpreted

User · Answer

I know I m late to the party but hopefully this ll help anyone looking for a concise answer that does work across all major browsers  except IE6  we have decided to stop supporting that browser so I refuse to even look at it anymore         search  searchbox       height  21px      line-height  21px      cheers  JP

User · Answer

I ve not tried this myself  but try setting   height   36px    for other browsers line-height  36px     for IE   Where 36px is the height of your input

User · Answer

If your element is a block element contained or with display like so   display  table-cel   Or  with an fixed line-height  you can  set the vertical align like so   Vertical-Align  Middle    It won t work for other cases  but it works fine on these conditions

User · Answer

In my opinion  the answer on this page with the most votes is the best answer  but his math was wrong and I couldn t comment on it   I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around   Of course I wanted the text vertically aligned in the center in all browsers   1 pixel border top 1 pixel border bottom 8 pixel top padding 8 pixel bottom padding 22 pixel font size  1   1   8   8   22   40 pixels exactly   One thing to remember is that you must remove your css height property or those pixels will get added to your total above    lt input type  text  style  padding-top 8px  padding-bottom 8px  margin  0  border  solid 1px  000000  font-size 22px     gt    This is working in Firefox  Chrome  IE 8  and Safari   I can only assume that if something simple like this is working in IE8  it should work similarly in 6  7  and 9 but I have not tested it  Please let me know and I ll edit this post accordingly

User · Answer

input type text       height  15px      line-height  15px      this is correct way to set vertical-middle position

User · Answer

Go for line-height   The vertical-align tag works fine for the submit button but not for the text in the input field  Setting line-height to the height of the input field works on all browsers  Incl IE7

User · Answer

input type text       height  15px      line-height  15px      this is correct way to set vertical-middle position

User · Answer

I was just working on this within MaterialUI s text inputs  Adding padding-top  0 5rem to the input style worked for me  While this was adjusting the padding  at least you don t need to worry about adjusting for updates  much less different breakpoints

User · Answer

Try    height  21px  line-height  21px     FOR IE      Because on some versions of IE   lt  9  the property height is not properly interpreted

User · Answer

Just don t set the height of the input box  only set the font-size  that will be ok

User · Answer

This is how I do it    lt ul gt      lt li gt First group of text here  lt  li gt      lt li gt  lt input type    value      gt  lt  li gt   lt  ul gt    then inside your CSS file     ul li     display  block    float  left      That should work for you

User · Answer

I ran into this problem myself   I found that not specifying an input height  but using the font-height and padding combined  results in vertically aligned text   For instance  lets say you want to have a 42px tall input box  with a font-size of 20px   You could simply find the difference between the input height and the font-size  divide it by two  and set your padding to that amount   In this case  you would have 22px total worth of padding  which is 11px on each side    lt input type  text  style  padding  11px 0px 11px 0px  font-size  20px     gt    That would give you a 42px tall input box with perfect vertical alignment   Hope that helps

User · Answer

In Opera 9 62  Mozilla 3 0 4  Safari 3 2  for Windows  it helps  if you put some text or at least a whitespace within the same line as the input field    lt div style  line-height  60px  height  60px  border  1px solid black   gt       lt input type  text  value  foo    gt  amp nbsp   lt  div gt     imagine an  amp nbsp after the input-statement   IE 7 ignores every CSS hack I tried  I would recommend using padding for IE only  Should make it easier for you to position it correctly if it only has to work within one specific browser

User · Answer

After much searching and frustration a combo of setting height  line height and no padding worked for me when using a fixed height  24px  background image for a text input field    form-text       color  white      outline  none      background-image  url input text png       border-width  0px      padding  0px 10px 0px 10px      margin  0px      width  274px      height  24px      line-height  24px      vertical-align  middle

User · Answer

In Opera 9 62  Mozilla 3 0 4  Safari 3 2  for Windows  it helps  if you put some text or at least a whitespace within the same line as the input field    lt div style  line-height  60px  height  60px  border  1px solid black   gt       lt input type  text  value  foo    gt  amp nbsp   lt  div gt     imagine an  amp nbsp after the input-statement   IE 7 ignores every CSS hack I tried  I would recommend using padding for IE only  Should make it easier for you to position it correctly if it only has to work within one specific browser

User · Answer

I know I m late to the party but hopefully this ll help anyone looking for a concise answer that does work across all major browsers  except IE6  we have decided to stop supporting that browser so I refuse to even look at it anymore         search  searchbox       height  21px      line-height  21px      cheers  JP

User · Answer

You should remove your title text and use the input placeholder for your label s title  Some visual and CSS work after that and your form will be looking tight and user friendly  I m aware of the disadvantages but this will completely relieve the alignment wrestling

User · Answer

Just don t set the height of the input box  only set the font-size  that will be ok

User · Answer

I ve not tried this myself  but try setting   height   36px    for other browsers line-height  36px     for IE   Where 36px is the height of your input

User · Answer

I was just working on this within MaterialUI s text inputs  Adding padding-top  0 5rem to the input style worked for me  While this was adjusting the padding  at least you don t need to worry about adjusting for updates  much less different breakpoints

User · Answer

You should remove your title text and use the input placeholder for your label s title  Some visual and CSS work after that and your form will be looking tight and user friendly  I m aware of the disadvantages but this will completely relieve the alignment wrestling

User · Answer

This is how I do it    lt ul gt      lt li gt First group of text here  lt  li gt      lt li gt  lt input type    value      gt  lt  li gt   lt  ul gt    then inside your CSS file     ul li     display  block    float  left      That should work for you

User · Answer

In Opera 9 62  Mozilla 3 0 4  Safari 3 2  for Windows  it helps  if you put some text or at least a whitespace within the same line as the input field    lt div style  line-height  60px  height  60px  border  1px solid black   gt       lt input type  text  value  foo    gt  amp nbsp   lt  div gt     imagine an  amp nbsp after the input-statement   IE 7 ignores every CSS hack I tried  I would recommend using padding for IE only  Should make it easier for you to position it correctly if it only has to work within one specific browser

User · Answer

I ve not tried this myself  but try setting   height   36px    for other browsers line-height  36px     for IE   Where 36px is the height of your input

User · Answer

The inner vertical alignment will depend on font height and input height  so  it can be adjusted using padding       Try some like     InVertAlign      height  40px     line-height  40px     font-size  2em     padding  0px 14px 3px 5px            lt input type  text  class  InVertAlign    gt    Remember to adjust the values on css class according to your needs

User · Answer

I ve not tried this myself  but try setting   height   36px    for other browsers line-height  36px     for IE   Where 36px is the height of your input

User · Answer

If your element is a block element contained or with display like so   display  table-cel   Or  with an fixed line-height  you can  set the vertical align like so   Vertical-Align  Middle    It won t work for other cases  but it works fine on these conditions

[css] Vertically align text within input field of fixed-height without display: table or padding?

Examples related to css

Examples related to xhtml