中心对齐时如何使单选按钮平齐？

Question

I have some radio buttons that I need center aligned, which they are. The only problem is that the buttons now aren't uniform on the left-hand side. See image below:

How would I go about keeping these centered but making them align flush?

I'm using text-align: center; to center everything.

Here is my HTML:

<div class="select clearfix">
  <div id="product-select" name="id">
    <input type="radio" value="273138236" name="product">
    black + walnut - $190.00
    <br>
    <input type="radio" value="277905554" name="product">
    brown + walnut - $190.00
    <br>
    <input type="radio" value="277905654" name="product">
    black + cherry - $190.00
    <br>
    <input type="radio" value="277905752" name="product">
    brown + cherry - $190.00
    <br>
  </div>
</div>

Answer 1

Wrap them in a div that has text-align: left . You could use the #product-select div for this purpose. However, you'll most likely need to switch to a different technique for centering the div since text-align does not affect block-level elements.

And for usability's sake, use <label> elements so people don't have to click the tiny radio button itself.