javascript - Vertical align text middle in jQuery Mobile Button? - Stack Overflow

admin管理员组

文章数量:1292722

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:

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:

• javascript
• jquery
• iphone
• css
• jquery-mobile

Share Improve this question Follow asked Nov 22, 2011 at 4:24 InatorInator 1,02422 gold badges1616 silver badges3434 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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/EQash/

@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

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.

本文标签： javascriptVertical align text middle in jQuery Mobile ButtonStack Overflow