jquery - 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也不起作用，因为我的文本可以有两行。

有谁知道我如何在按钮中垂直居中我的文本？

编译代码的图像

score 2 · Accepted Answer

你应该使容器 div

position: relative;

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

position: absolute; margin: 0px auto;

使其在容器中垂直居中！

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

text-align: center;

应该做水平居中的技巧。

score 1 · Accepted Answer

1

试试上下padding: 10px 0;

于 2012-05-29T14:39:53.080 回答

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

4 回答 4