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:

Answer 1

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/

Answer 2

@Inator I think vertical align middle works only for the Table elements and not for other cases.

In that case in the class you apply to button:

Set: display: table-cell

and vertical-align: middle

and possibly create a outer element say div and set its display to table like display: table and vertical-align: middle

Hope it might work

Answer 3

The Inline margin-top style takes precedence over the the styles defined in the CSS class. That's why CSS defined values have no effect. Solution is to add

margin-top: -5px !important;

to your CSS if you want the negative top margin to take effect.