jquery - 需要将可折叠项目的标题放在 Jquery Mobile 1.1.0 的中心

Question

我有这样的可折叠内容http://jsfiddle.net/coderslay/Ae5CU/

因为摘要在左侧对齐。我需要在中心对齐摘要。

怎么做？

Answer 1

尝试这样的事情：

.ui-collapsible-heading a {text-align:center;}​​​

Answer 2

您是指摘要中的内容还是标题本身？

如果它的内容下面的css似乎可以解决问题。虽然没有完全测试。

将此添加到 jsFiddle 中的 CSS 部分（只会更新 summaryid 标头）

​#summaryid .ui-btn-text​ { text-align:center;margin:0px auto; display:inline-block; }​

对于所有可折叠标题的全局更新，请使用

.ui-collapsible-heading .ui-btn-text { text-align:center; 边距：0px 自动；显示：内联块；}​</p>

标头正在由 jQuery Mobile 转换为以下 HTML 输出

 <h2 id="summaryid" class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-right ui-corner-top ui-corner-bottom ui-btn-up-null" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="null" data-mini="false">
    <span class="ui-btn-inner ui-corner-top ui-corner-bottom">
        <span class="ui-btn-text">
            <span>
                Summary
            </span>
            <span class="ui-collapsible-heading-status"> 
                click to expand contents
            </span>
        </span>
        <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span>
    </span>
</a>

因此，沿着 DOM 走下去，我们可以找到 id 'summaryid' 然后是类 'ui-btn-text' 的子级，它是带有单词 summary 的跨度。您需要做的是将跨度设置为出现在中心。为此，请使用 margin:0px auto 和 display:inline-block。

现在我还没有用较小的分辨率或长标题对此进行测试，但这应该可以帮助您入门。

干杯，

尼科