Question

我正在尝试水平居中一组三个单选按钮但是没有成功。

这是我的代码：

HTML

<div class="section-wrap section-flavors">
        <input id="r11" name="radio3" type="radio" value="radio_btn"  class="flavors-radio">
   <label for="r11"><span></span>Don't Want</label>
        <input id="r12" name="radio3" type="radio" value="radio_btn" class="flavors-radio">
   <label for="r12"><span></span>Don't Care</label>
        <input id="r13" name="radio3" type="radio" value="radio_btn" checked class="flavors-radio">
   <label for="r13"><span></span>Want</label>
 </div>

这是我拥有的CSS：

CSS

.content .section-wrap {
  background: #f1f8e9;
  padding: 30px;
  overflow: hidden;
}

我尝试过添加text-align center和display：inline-block但无济于事。

我还检查了this question和this one，但未能将他们的答案应用于我的情况。感谢。

Answer 1

使用此：

.section-wrap{
    text-align:center;
}

Here is the JSFiddle demo

Div中的水平居中单元按钮

1 个答案: