Невозможно центрировать радиокнопки в стиле пользовательского интерфейса jQuery

Question

У меня был набор переключателей, которые были встроены.С тех пор я преобразовал их в кнопки пользовательского интерфейса jQuery с этой строкой кода:

$("input:radio").button();

Теперь они все выглядят хорошо, но все еще выровнены по левому краю.Я не могу решить эту проблему.Я пытался даже использовать <center>, и все, что между ними, но это не по центру, как я хотел.

Вот HTML:

<div style="display: <?php echo $visible; ?>;">
        <form action="php/ratingsPost.php" method="POST" id="ratingsPost">
                      <input type="radio" class="radio" name="rate" value="1" id="1" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="1">1</label>
                      <input type="radio" class="radio" name="rate" value="2" id="2" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="2">2</label>
                      <input type="radio" class="radio" name="rate" value="3" id="3" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="3">3</label>
                      <input type="radio" class="radio" name="rate" value="4" id="4" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="4">4</label>
                      <input type="radio" class="radio" name="rate" value="5" id="5" onChange="javascript:$('#ratingsPost').submit()"/>
                      <label for="5">5</label>
        </form>
        </div>

Любая помощь?

Answer 1

В соответствии с документацией (последняя вкладка), вы можете указать другую тему для ваших компонентов JQueryUI.

Все переключатели должны быть похожи на это:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

Все, что вам нужно, это перезаписать классы для вашего собственного дизайна с использованием личной таблицы стилей CSS.Например:

.ui-button .ui-button-text{
    // personal style
}

В любом случае, небольшой код, использующий JSBin или JSFiddle , как сказал ДжонП, может быть хорошим, чтобы получить лучшее представление о вашей проблеме.Удачной кодировки!