0

このような折りたたみ可能なコンテンツがありますhttp://jsfiddle.net/coderslay/Ae5CU/

サマリーは左側に配置されます。サマリーを中央に揃える必要があります。

どうやってするか？

4

2 に答える 2

1

要約内のコンテンツですか、それともヘッダー自体ですか?

そのコンテンツの場合、次の 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' と、単語 summary を持つスパンであるクラス 'ui-btn-text' の子を見つけることができます。必要なことは、スパンが中央に表示されるように設定することです。これを行うには、margin:0px auto と display:inline-block を使用します。

今、私はこれを小さい解像度や長いヘッダーでテストしていませんが、これはあなたが始めるのに役立つはずです.

乾杯、

ニコ

于 2012-05-17T06:38:14.317 に答える
1

次のようなことを試してください： 

.ui-collapsible-heading a {text-align:center;}​​​
于 2012-05-17T06:32:39.997 に答える