CODEWITHSUNDEEP
htmlcssinputradio-button
novicePrgrmr
novicePrgrmr

Reputation: 19385

How to make radio buttons flush when center aligned?

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:

enter image description here

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>

Upvotes: 0

Views: 845

Answers (1)

ThiefMaster
ThiefMaster

Reputation: 318518

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.

Upvotes: 3

Related Questions