title: Radio Buttons Inline and Centered with Labels
body: <p>I have the following form:</p>
  
  <pre><code>        &lt;form action="post.php" method="POST"&gt;
              &lt;fieldset&gt;
                   &lt;div class="ratingClass"&gt;
                        &lt;input type="radio" class="radio" name="rate" value="1" id="1"/&gt;
                        &lt;label for="1"&gt;1&lt;/label&gt;
                        &lt;input type="radio" class="radio" name="rate" value="2" id="2"/&gt;
                        &lt;label for="2"&gt;2&lt;/label&gt;
                        &lt;input type="radio" class="radio" name="rate" value="3" id="3"/&gt;
                        &lt;label for="3"&gt;3&lt;/label&gt; 
                        &lt;input type="radio" class="radio" name="rate" value="4" id="4"/&gt;
                        &lt;label for="4"&gt;4&lt;/label&gt;
                        &lt;input type="radio" class="radio" name="rate" value="5" id="5"/&gt;
                        &lt;label for="5"&gt;5&lt;/label&gt;                                                                
                   &lt;/div&gt;
              &lt;/fieldset&gt;
              &lt;input type="submit" value="Rate"&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>Styled by the following CSS:</p>
  
  <pre><code>fieldset { 
   overflow:hidden; 
  }
  .ratingClass { 
   float:left; 
   clear:none;
  }
  label { 
   float:left; 
   clear:none; 
   display:block; 
   padding: 2px 1em 0 0; 
  }
  input[type=radio], input.radio { 
   float:left;
   clear:none; 
   margin: 2px 0 0 2px; 
  }
  </code></pre>
  
  <p>It's all inside of another div that has <code>text-align: center;</code> styling. </p>
  
  <p>I realize that behavior is because of the floats, but if I remove them then the radio buttons no longer display inline.</p>
  
  <p><strong>How can I have them inline and centered?</strong></p>