在jQuery Mobile Button中垂直对齐文本中间？ [英] Vertical align text middle in jQuery Mobile Button?

问题描述

我试图缩小jQuery移动按钮的高度，以更好地适合列表视图，但我不能得到正确的文本排队。以下是我的实现：

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>

样式化的边距会影响按钮的宽度，和底部边缘值没有影响，无论尝试的值。我也尝试了各种填充，高度和其他值没有运气。线高度也是唯一对按钮高度有任何影响的内联样式，但其中的文本未对齐。尝试使用jQuery Mobile btw的1.0b1 +版本。

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:

推荐答案

height 到按钮，然后给它 line-height 。

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

例如

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

检查此示例 http://jsfiddle.net/EQash/

这篇关于在jQuery Mobile Button中垂直对齐文本中间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！