jquery mobile：垂直居中两行按钮文本答案

【问题标题】：jquery mobile: vertically center two lines of button textjquery mobile：垂直居中两行按钮文本
【发布时间】：2012-05-29 14:34:58
【问题描述】：

我有一个带有 2 行文本的 jQuery 移动按钮，具有以下 CSS 规则：

.ui-btn-text {
    word-wrap: break-word !important;
    white-space: normal !important;
}

jQuery 在文本周围创建了一个类：ui-btn-inner ui-btn-corner-all。

我希望这个元素垂直居中。

当我使用vertical-align 时，它没有任何效果。 line-height 也不起作用，因为我的文本可以有两行。

有没有人知道如何让按钮中的文本垂直居中？

【问题讨论】：

【解决方案1】：

你应该让容器 div

position: relative;

并给它一个高度。然后制作内部div

position: absolute; margin: 0px auto;

让它在容器中垂直居中！

=============
原答案：

text-align: center;

应该做水平居中的技巧。

【讨论】：

【解决方案2】：

内联元素（如<SPAN>）只能使用line-height 来伪造垂直对齐。因此，如果在这种情况下由于多行而对您不起作用，请切换到表格/单元格 (<TD>)。但是，如果 jQuery mobile 正在生成内部 span 标签，那将不适合您。

您也可以垂直对齐包装器<TD>，并使按钮的高度更小，这样文本本身就不需要垂直居中。但这意味着视觉设计会发生变化。

HTML 规范不是为这种类型的布局设计的。因此，如果上述解决方案在您的情况下不起作用，您将放弃尝试动态垂直对齐内联元素中的文本，至少通过 HTML/CSS-only 解决方案。

非 CSS 解决方案包括预渲染图像、数据绑定后的 Javascript 调整、HTML5 <CANVAS> 或 SVG 图像，以及其他高级解决方法，如果您想要的只是垂直对齐的文本，通常不值得麻烦。

【讨论】：

【解决方案3】：

试试顶底padding: 10px 0;

【讨论】：

【解决方案4】：

我通过将文本放在顶部边缘的 div 中解决了这个问题，当它有 2 行时，它现在不完美居中，但应该没问题。谢谢你的建议

【讨论】：