jQuery Mobile的：按钮文本

Question

的垂直中心两行我有2行文字与下面的CSS规则的jQuery移动按钮：

.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

内联元素（如<SPAN>）只能使用line-height伪造垂直取向。所以如果在这种情况下由于多行而不适合你，请切换到表格/单元格（<TD>）。但是，如果jQuery手机正在生成内部span标签，那不适合你。

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

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

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

Answer 2

你应该让div容器

position: relative; 

，并给它的高度。然后使内部分区

position: absolute; margin: 0px auto; 

使其在容器中垂直居中！

=============
原来的答复：

text-align: center; 

应该做的伎俩为水平居中。

Answer 3

尝试用顶底padding: 10px 0;

Answer 4

我解决了这个问题，把文本放在一个带有页边空白的div里，当它有2行时它不完美，现在居中，但它应该没问题。 Thx为您的建议