Jquery Mobile Collapsible Listview 对齐文本和按钮

Question

这是我正在做的事情：JsFiddle

我希望单词“New”水平居中，按钮“Something”和 Flipswitch 垂直居中。

有可能吗？

我试过了，还是不行：

<div data-role="collapsible" data-theme="b" data-inset="true" data-icon="false" style="text-align: center !important;">
    <h2 style="text-align: center !important;">New</h2>


            <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right">
                <a href="#" class="ui-btn ui-btn-b ui-li-count">Something</a>
            </div>


            <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right">
                <select data-role="flipswitch"> 
                    <option value="Off">Off</option>
                    <option value="On" selected="selected">On</option>
                </select>
            </div>

我正在使用 Jquery Mobile 1.4 和 Jquery 1.10.2，但我对 css 不太擅长。

多谢了。

Answer 1

对于按钮和翻转开关，将每个元素包装在 span 中，并使用类 ui-btn-right 使其与右侧对齐。

<li data-icon="false">
  <a href="#">Type 1</a>
  <span class="ui-btn-right">
    <a href="#" class="ui-btn ui-btn-b ui-mini">Something</a>
  </span>
</li>

要居中对齐可折叠的标题，您需要覆盖ui-collapsible-heading-toggle。

更新

基于@ezanker 的comment

.ui-collapsible .ui-collapsible-heading-toggle {
  text-align: center;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

li > a.ui-btn {
  padding-right: 120px;
}

Demo