如何在中心對齊時使單選按鈕齊平？

Question

我有一些單選按鈕，我需要中心對齊，他們是。唯一的問題是，左側的按鈕現在不統一。見下圖：

我怎麼會去保持這些​​中心，但使它們對齊沖洗？

我使用text-align: center;來居中一切。

這裏是我的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

總結他們在具有text-align: left一個div。您可以使用#product-select div來達到此目的。但是，由於text-align不影響塊級元素，因此很可能需要切換到不同的用於居中div的技術。

出於可用性的原因，請使用<label>元素，這樣人們就不必單擊微小的單選按鈕本身。