How do I shrink the height of a jQuery Mobile button and keep its text vertically aligned?

How do I shrink the height of a jQuery Mobile button and keep its text vertically aligned?

Hello,

What is the best way to shrink a jQuery Mobile button and keep its text vertically aligned?  If I have a regular button tag:

  1. <button id="search_form_button_go" type="submit" data-mini="true" data-inline="true">Go</button>
I can shrink the button height using this CSS:

  1. #searchbar .ui-btn {
      height: 32px;
    }


However, then the "Go" text within the button is not vertically aligned; it is closer to the bottom of the button.

If I add a line-height to the CSS, I can tweak the value to approximately center the text:

  1. #searchbar .ui-btn {
      height: 32px;
      line-height: 20px;
    }



But the only way I can center the text is by changing the line-height value via trial and error, and trying to eyeball whether the text is vertically aligned.

Is there a better way to shrink a jQuery Mobile button and keep its text vertically aligned?  I don't mind changing the height or line-height, but I don't like having to eyeball it; for example, it would be easier if I could have the height and line-height be the same value.

Thank you!!