Vertical align text middle in jQuery Mobile Button?

Question

I'm attempting to shrink the height of a jQuery Mobile Button for a better fit in a list view, but I cannot get the text to line up properly. Here's my implementation so far:

.listDelBtn .ui-btn-text {
    margin: -5px -15px -5px -15px;
}

<a class="listDelBtn" data-role="button" data-theme="b" style="float: right; width: 75px; line-height: 11px; margin-top: 6px; z-index: 12; padding: 0 0px 0 0px;">delete</a>

the styled margins do affect the width of the button to give it a shorter length, however, the top and bottom margin values have no affect, regardless of the values tried. I've also attempted various padding , height, and other values with no luck. Line height was also the only inline style that had any affect on height of the button, but the text within is misaligned. Attempting on versions 1.0b1+ of jQuery Mobile btw.

Here's an image of the resulting button for reference:

Solution

You can give height to your button then give same line-height to it.

For example

.listDelBtn{
 height:30px;
 line-height:30px;
}

Check this example http://jsfiddle.net/EQash/