css - Radio Buttons Inline and Centered with Labels -

i have following form:

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

styled following css:

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

it's inside of div has text-align: center; styling.

i realize behavior because of floats, if remove them radio buttons no longer display inline.

how can have them inline , centered?

you don't need float nor make labels block elements. replacing css causes centered:

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

the <div class="ratingclass"> superfluous , can removed.