问题
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:
回答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/
回答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
回答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.
来源：https://stackoverflow.com/questions/8221973/vertical-align-text-middle-in-jquery-mobile-button