Css 单选按钮与标签内联并居中

我有以下表格：

        <form action="post.php" method="POST">
            <fieldset>
                 <div class="ratingClass">
                      <input type="radio" class="radio" name="rate" value="1" id="1"/>
                      <label for="1">1</label>
                      <input type="radio" class="radio" name="rate" value="2" id="2"/>
                      <label for="2">2</label>
                      <input type="radio" class="radio" name="rate" value="3" id="3"/>
                      <label for="3">3</label> 
                      <input type="radio" class="radio" name="rate" value="4" id="4"/>
                      <label for="4">4</label>
                      <input type="radio" class="radio" name="rate" value="5" id="5"/>
                      <label for="5">5</label>                                                                
                 </div>
            </fieldset>
            <input type="submit" value="Rate">
        </form>

它位于另一个div的内部，该div具有

text align:center样式

我意识到这种行为是因为浮动，但如果我删除它们，单选按钮将不再显示为内联

如何使它们内联并居中？
尝试制作.ratingClass容器：

.ratingClass { 
 float:left; 
 clear:none;
 width: 100%;
 text-align: center; 
}

或

尝试创建.ratingClass容器：

.ratingClass { 
 float:left; 
 clear:none;
 width: 100%;
 text-align: center; 
}

或

如果您可以处理
ratingClass
div的固定宽度，您可以按如下方式操作

.ratingClass { 
    width:300px; /* insert desired width here */
    margin:auto;
}

如果您可以处理
ratingClass
div的固定宽度，您可以按如下方式操作

.ratingClass { 
    width:300px; /* insert desired width here */
    margin:auto;
}

您不需要浮动所有内容，也不需要让标签阻止元素。用以下内容替换CSS会使所有内容居中：

fieldset {
  overflow: hidden;
}
label {
  padding: 2px 1em 0 0;
}
input[type=radio], input.radio {
  margin: 2px 0 0 2px;
}

也是多余的，可以删除。
您不需要浮动所有内容，也不需要让标签阻止元素。用以下内容替换CSS会使所有内容居中：

fieldset {
  overflow: hidden;
}
label {
  padding: 2px 1em 0 0;
}
input[type=radio], input.radio {
  margin: 2px 0 0 2px;
}

也是多余的，可以删除。
这几乎可以正常工作，但单选按钮和标签仍在div内左浮动，看起来非常不均匀。这几乎可以正常工作，但单选按钮和标签仍在div内左浮动，看起来非常不均匀。