El botón de radio no se alinea correctamente en el centro en jquery mobile versión 1.0?

Question

Utilicé el botón de opción en mi aplicación móvil jquery y estoy usando jquery mobile 1.0 y jquery 1.6.4. El problema es siempre alineado a la izquierda. Entonces, traté de moverme al centro pero no funciona. ¿Cómo arreglar esto? Gracias por adelantado.

<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> 

Answer 1

Y Debe envolver los botones de radio en un div con un ancho fijo y un margen establecido en automático en el conjunto de campos. Así es como, por supuesto, es mejor no usar css en línea.

<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> 

Answer 2

que necesita para sobre-escribir esta clase en su archivo CSS personalizado

.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 
} 

o puede definir su propia clase que a lo largo escribirá encima de la propiedad ... algo como esto:

.leftAlign{left: 303px;} 

a continuación, asignar esta clase para el lapso que contiene el botón radion personalizado utilizando jQuery ...

Answer 3

Intento demasiado y finalmente la 1 ª respuesta de esta pregunta resuelve mi problema. Parece una solución para el error de jquery para dispositivos móviles, pero debería manejarse correctamente sin hacer ese trabajo de parche :). Gracias Hampus.

Answer 4

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

Answer 5

voy a recoger el enlace dado por nir:

Envolver el fieldset en un div con estilo display: table; margin: 0 auto;. Esto podría ser un poco un truco, pero funciona sin tener que establecer ningún ancho o margen.

<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>