title: jQuery mobile button group: How to center the complete vertical group?
body: <p>I try currently to beautify my sources a little bit. For this I want to change the width of buttons and radio buttons to 80% and change the alignment to center. For the buttons I made css settings that works quite fine, but I am not able to center the radio button group.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-role="page" id="testPage" data-theme="e"&gt;
      &lt;fieldset data-role="controlgroup"&gt;
          &lt;legend id="SettingsDifficulty"&gt;&lt;/legend&gt;
          &lt;input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" /&gt;
          &lt;label for="radio-choice-1" id="label1" class="activeOnce"&gt;Radio 1&lt;/label&gt;
          &lt;input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" /&gt;
          &lt;label for="radio-choice-2" id="label2" class="activeOnce"&gt;Radio 2&lt;/label&gt;
          &lt;input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" /&gt;
          &lt;label for="radio-choice-3" id="label3" class="activeOnce"&gt;Radio 3&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;/br&gt;
      &lt;hr&gt;
      &lt;/br&gt;
  &lt;a href="#settings" data-role="button" id="buton" class="activeOnce"&gt;Button&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ui-btn.activeOnce
  {
    width:80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  </code></pre>
  
  <p>The single button at the end is now at 80% width and perfect centered. The radio buttons are also at 80% width but still left aligned. At the web I found some solutions for horizontal radio button groups, but this solutions does not work with data-type="vertical". Is there a way to center this, too? </p>
  
  <p>Thank you very much for helping me :-).</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/7eKZb" rel="nofollow">http://jsfiddle.net/7eKZb</a></p>