jQuery Mobile Button中的垂直对齐文本中间？

Posted 2023-05-09

【中文标题】jQuery Mobile Button中的垂直对齐文本中间？

【英文标题】：Vertical align text middle in jQuery Mobile Button?

【发布时间】：2012-01-03 13:14:30

【问题描述】：

我正在尝试缩小 jQuery Mobile 按钮的高度以更好地适应列表视图，但我无法让文本正确排列。到目前为止，这是我的实现：

.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>

样式的边距确实会影响按钮的宽度以使其长度更短，但是，无论尝试使用何种值，顶部和底部边距值都没有影响。我还尝试了各种 padding 、 height 和其他值，但都没有成功。行高也是唯一对按钮高度有任何影响的内联样式，但其中的文本未对齐。正在尝试 jQuery Mobile 的 1.0b1+ 版本。

这是生成按钮的图像以供参考：

【参考方案1】：

您可以将height 分配给您的button，然后将相同的line-height 分配给它。

例如

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

检查这个例子http://jsfiddle.net/EQash/

【参考方案2】：

@Inator 我认为垂直居中对齐仅适用于 Table 元素，不适用于其他情况。

在那种情况下，在你应用到按钮的类中：

设置：显示：表格单元格

和垂直对齐：中间

并可能创建一个外部元素 div 并将其显示设置为 table 喜欢显示：表格 和垂直对齐：中间

希望它可以工作

【参考方案3】：

Inline margin-top 样式优先于 CSS 类中定义的样式。这就是 CSS 定义的值无效的原因。解决方法是添加

margin-top: -5px !important;

如果您希望负上边距生效，请添加到您的 CSS。