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

Question

我有一个带有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不起作用，因为我的文字可以有两行。

有没有人知道如何在按钮中垂直居中我的文字？

Answer 1

你应该制作容器div

position: relative;

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

position: absolute; margin: 0px auto; 

使其在容器中垂直居中！

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

text-align: center;

应该做水平居中的技巧。

Answer 2

尝试使用顶部padding: 10px 0;

Answer 3

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

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

HTML规范不适用于该类型的布局。因此，如果上述解决方案无法在您的情况下工作，那么您将放弃尝试在内联元素中动态垂直对齐文本，至少通过HTML / CSS解决方案。

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

Answer 4

我通过将文本放在带有边距顶部的div中来解决它，当它有2行时它现在没有完善，但它应该没问题。感谢你的建议