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 的 div 中.你可以使用 #product-select div 用于此目的。但是，自 text-align 以来，您很可能需要切换到一种不同的技术来使 div 居中。不影响 block 级元素。

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