jQuery mobile button group: How to center the complete vertical group? - css

Question

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.
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>
Button
</div>
CSS:
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
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?
Thank you very much for helping me :-).
JSFIDDLE: http://jsfiddle.net/7eKZb

Answer 1

Use jQuery Mobile grid system, ui-grid-b and 3 blocks ui-block-a, ui-block-b and 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>
And override width of blocks a, b and c. I used extra custom classes in order not to override other blocks.
.ui-block-left, .ui-block-right {
width: 10% !important;
}
.ui-block-center {
width: 80% !important;
}

Answer 2

See this fiddle http://jsfiddle.net/bB2vM/
i wrapped your radio button group in a div and it worked see the fiddle
<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>
Button
and here is the css
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#centregroup
{
text-align:center;
}
See screeshot.

Answer 3

U can group your radio buttons inside a div with fixed width and height:
<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