jQuery移动按钮组：如何使整个垂直组居中？

Question

我目前尝试美化我的来源一点点。为此，我想将按钮和单选按钮的宽度更改为80％，并将对齐更改为居中。对于按钮我做了很好的css设置，但我无法将单选按钮组居中。

HTML：

<div data-role="page" id="testPage" data-theme="e">
    <fieldset data-role="controlgroup">
        <legend id="SettingsDifficulty"></legend>
        <input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
        <label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
        <input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
        <label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
        <input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
        <label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
    </fieldset>
    </br>
    <hr>
    </br>
<a href="#settings" data-role="button" id="buton" class="activeOnce">Button</a>

</div>

CSS：

.ui-btn.activeOnce
{
  width:80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

最后的单个按钮现在宽度为80％，完美居中。单选按钮的宽度也是80％但仍保持左对齐。在网上我找到了一些水平单选按钮组的解决方案，但是这个解决方案不适用于data-type =“vertical”。有没有办法集中这个呢？

非常感谢你帮助我： - ）。

JSFIDDLE：http://jsfiddle.net/7eKZb

Answer 1

请参阅此小提琴http://jsfiddle.net/bB2vM/

我将你的单选按钮组包装在一个div中，它可以看到小提琴

<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
    <legend id="SettingsDifficulty"></legend>
    <div id="centregroup">
    <input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
    <label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
    <input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
    <label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
    <input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
    <label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
    </div>
</fieldset>
</br>
<hr>
</br>

按钮

这是css

.ui-btn.activeOnce
{
  width:80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#centregroup
{
  text-align:center;    
}

见screeshot。

Answer 2

使用jQuery Mobile网格系统，ui-grid-b和3个阻止ui-block-a，ui-block-b和ui-block-c。

  

<强> Demo

<div class="ui-grid-b">
  <div class="ui-block-left ui-block-a"><!-- Placeholder --></div>
    <div class="ui-block-center ui-block-b">
      <fieldset data-role="controlgroup">
        <!-- Buttons go here -->
      </fieldset>
    </div>
  <div class="ui-block-right ui-block-c"><!-- Placeholder --></div>
</div>

并覆盖块a，b和c的宽度。我使用了额外的自定义类，以便不覆盖其他块。

.ui-block-left, .ui-block-right {
  width: 10% !important;
}

.ui-block-center {
  width: 80% !important;
}

Answer 3

你可以将单选按钮分组到具有固定宽度和高度的div中：

<fieldset data-role="controlgroup" data-type="vertical" style="text-align: center">
  <div class="centerRadio">
   <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
   <label for="radio-choice-1">A</label>
   <input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
   <label for="radio-choice-2">B</label>
 </div>
</fieldset>

CSS：

.centerRadio
{
width: 80%; margin: 0 auto;
}

DEMO