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:
- <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:
- #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:
- #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!!