无法居中jQuery UI风格的单选按钮

Question

我有一组内联的单选按钮。我后来他们转换为jQuery UI的按钮与这行代码：

$("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

根据documentation（最后一个标签），您可以为您的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作为JohnP一些代码，说可能是好的，得到你的问题的一个更好的视野。快乐编码！