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

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