Radio button not align properly at center in jquery mobile version 1.0?

问题

I used radio button in my jquery mobile application and i'm using jquery mobile 1.0 and jquery 1.6.4. The problem is it always aligned left. So, i tried to move at center but it is not working. How to fix this? Thanks in advance.

<div id="userOptionGroup" data-role="contain">
          <fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;">
                <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser"  checked="checked" />
                <label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label>
                <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" />
                <label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label>
          </fieldset>
          </div>

回答1:

You must wrap radiobuttons in a div with fixed width and margin set to auto on the fieldset. Here's how - of course it's neater to not use inline css.

<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center">
  <div style="width: 200px; margin: 0 auto;">
   <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>

回答2:

you need to over-write this class in your custom css file

.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {
    left: 303px;// can vary according to your lay out
}

or you can define your own class which will over write above property...something like this-

.leftAlign{left: 303px;}

then assign this class to the span which contains the customized radion button using jquery...

回答3:

I try too much and finaly 1st Answer of this question resolve my problem. Its look like fix to jquery mobile bug but it should be handle properly without doing such patch work :). Thanks Hampus.

回答4:

I'll pick up the link given by nir:

Wrap the fieldset into a div with style display: table; margin: 0 auto;. This might be a bit of a hack but it works without having to set any width or margin.

<div style="display: table; margin: 0 auto;">
    <fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;">
        <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser"  checked="checked" />
        <label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label>
        <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" />
        <label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label>
    </fieldset>
</div>

回答5:

Check out: https://forum.jquery.com/topic/radio-button-problem-rc3

来源：https://stackoverflow.com/questions/8252895/radio-button-not-align-properly-at-center-in-jquery-mobile-version-1-0

标签

jquery

jquery-ui

html

jquery-mobile

radio-button