html - 居中对齐时如何使单选按钮齐平？

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. 您可以将#product-selectdiv 用于此目的。但是，您很可能需要切换到另一种技术来使 div 居中，因为text-align它不会影响块级元素。

并且为了可用性，使用<label>元素，这样人们就不必单击微小的单选按钮本身。