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

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

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

怎么做？

尝试这样的事情：

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

你的意思是摘要内的内容还是标题本身？

如果是内容，以下 css 似乎可以解决问题。虽然没有经过充分测试。

将其添加到 jsFiddle 中的 CSS 部分(只会更新 summaryid 标头(

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

要对所有可折叠标头进行全局更新，请使用

.ui-collapsible-header .ui-btn-text { text-align：center; margin：0px auto; display：inline-block; }

标头由 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 的跨度。您需要做的是将范围设置为显示在中心。为此，请使用边距：0px auto 和 display：inline-block。

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

干杯

尼科

相关内容

最新更新

热门标签：