javascript jQuery Mobile Button 中的垂直对齐文本中间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8221973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align text middle in jQuery Mobile Button?
提问by Inator
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:
我试图缩小 jQuery Mobile Button 的高度以更好地适应列表视图，但我无法让文本正确排列。到目前为止，这是我的实现：
.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.
样式边距确实会影响按钮的宽度以使其长度更短，但是，无论尝试的值如何，顶部和底部边距值都没有影响。我还尝试了各种 padding 、 height 和其他值，但没有运气。行高也是唯一对按钮高度有任何影响的内联样式，但其中的文本未对齐。正在尝试 jQuery Mobile 1.0b1+ 版本。
Here's an image of the resulting button for reference:
这是生成的按钮的图像以供参考：
回答by sandeep
You can give heightto your buttonthen give same line-heightto it.
你可以给height你的button然后给line-height它同样的。
For example
例如
.listDelBtn{
height:30px;
line-height:30px;
}
Check this example http://jsfiddle.net/EQash/
回答by Moons
@Inator I think vertical align middle works only for the Table elements and not for other cases.
@Inator 我认为垂直对齐中间仅适用于 Table 元素，不适用于其他情况。
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
并可能创建一个外部元素说 div 并将其显示设置为 table，例如 display: table 和 vertical-align: middle
Hope it might work
希望它可以工作
回答by Strelok
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
Inline margin-top 样式优先于 CSS 类中定义的样式。这就是 CSS 定义的值不起作用的原因。解决方法是添加
margin-top: -5px !important;
to your CSS if you want the negative top margin to take effect.
如果您希望负上边距生效，请添加到您的 CSS。
