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

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>元素，这样人们就不必单击微小的单选按钮本身。