html vertical align the text inside input type button

Question

I m trying to create a button with height of  22px    and that the text inside the button will be vertically aligned in the center of the button  I tried everything   and can t find out how to do it   how can this be done   UPDATE  this is my code   CSS    test1 label       float  left      clear  left      width 31       margin-right -2px     test1 input       float left      width 69       margin-right -2px     testbutton       float left      margin-left  10px      height  22px      line-height  22px      text-align center      background-color  fbfbfb      border 1px solid  b7b7b7      color  606060      cursor pointer      display inline-block      font bold 12px 100  Arial  sans-serif      HTML    lt div class  test1  gt   lt label for  test  title  test  gt test lt  label gt                                   lt input style  width 18px  float left   type  checkbox  name  test  id  test  tabindex  5    gt   lt input class  testbutton  id  testbutton  style  width 60px  type  button  value  Import    gt  lt  div gt

User · Answer

Use the  lt button gt  tag instead   lt button gt  labels are vertically centered by default

User · Answer

Try adding the property line-height  22px  to the code

User · Answer

The simplest solution would be to simply use an actual button element  which centers its content vertically without any special CSS in most or all browsers  and can otherwise be styled as usual

User · Answer

I ve given up trying to align my text on buttons  Now  if I need it  I m using  lt a gt  tags  like so    lt a href  javascript void     style  display block font-size 1em padding 5px cursor default   onclick  document getElementById  form   submit     gt Submit lt  a gt    So  if the document s font size is 12px  my  button  will have 22px height  And the text will be vertically align  That in theory  because  in some casses  an unequal padding of  6px 5px 4px 5px  will do the job done   Although  is a hack  this technique is pretty good for solving compatibility issues in older browsers too  like IE6

User · Answer

I was having a similar issue with my button  I included line-height  0  and it appears to have worked  Also mentioned by  anddero  button type submit      background-color   4056A1    border-radius  12px    border  1px solid  4056A1    color  white    padding  16px 32px    text-decoration  none    margin  2px 1px    cursor  pointer    display  inline-block    font-size  16px    height  20px    line-height  0

User · Answer

You can use flexbox  check browser support  depending on your needs     testbutton     display  inline-flex    align-items  center

User · Answer

If your button weren t floated  you could use vertical-align middle  to center the text inside it  After lots of experimentation  this was the only solution I could find that worked in IE without changing markup   in Chrome  button text seems to be automatically centered without this hack    But you use a float left which forces the element to be a block element  your display inline-block is ignored   whcih in turn prevents vertical-align from working because vertical-align doesn t work inside a block element    So you have three choices    stop using floats in this form  and use inline and inline-block elements to simulate floating  as  stefan notes above  use another element like an  lt a gt  and use javascript to submit the form  accept that in IE your buttons will be off by 1px vertically

User · Answer

I found that using a fixed width with padding seems to work  in ff at least    Btn       width 75px     padding 10px       Try it at -  http   jsfiddle net stevenally z32kg

User · Answer

I had a button where the background-image had a shadow below it so the text alignment was off from the top  Changing the line-height wouldn t help  I added padding-bottom to it and it worked   So what you have to do is determine the line-height you want to play with  So  for example  if I have a button who s height is truly 90px but I want the line-height to be 80px I would have something like this   input type butotn  mybutton      background  url my image png  no-repeat center top    Image is 90px x 150px       width  150px      height  80px    shadow at the bottom is 10px  90px-10px        padding-bottom  10px    the padding will make up for the lost height while maintaining the line-height to the proper height         I hope this helps

User · Answer

The simplest thing you can do is use reset css  It normalizes the default stylesheet across browsers  and coincidentally allows button   vertical-align  middle    to work just fine  Give it a shot - I use it in virtually all of my projects just to kill little bugs like this    https   gist github com nathansmith 288292

[html] html vertical align the text inside input type button

Examples related to html

Examples related to css