如何居中对齐测验标题中心下方的一组单选按钮并保持响应？答案

【问题标题】：how to center align a group of radio buttons under the center of the quiz title and keep responsive?如何居中对齐测验标题中心下方的一组单选按钮并保持响应？
【发布时间】：2016-07-29 06:35:08
【问题描述】：

这里是在 bootstrap3 中重现问题的代码。我想要的是对齐测验标题中心下方的单选按钮，同时保持文本左对齐。当前标题默认为内联流 bs3 示例表单结构。我在想如果使用 position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. 可能会破坏响应流。有什么建议你如何平衡响应和很好地对齐？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
  <div class="main-content">
      <div class="container-fluid">
<div class="row-fluid">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
    <h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
  </div>
  
 
  <div class="col-xs-12   ">
    <div class="form-group">
      <div class="radio">
        <label for="Q2[score]" class="">
          <input type="radio" name="Q2[score]" value="1" required="required">Agree
        </label>
      </div>
    </div>
  </div>
  <div class="col-xs-12   ">
    <div class="form-group">
      <div class="radio">
        <label for="Q2[score]&quot;" class="">
          <input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
        </label>
      </div>
    </div>
  </div>
  <div class="col-xs-12 ">
    <div class="form-group">
      <div class="radio">
        <label for="Q2[score]" class="answered">
          <input type="radio" name="Q2[score]" value="3" required="required">Disagree
        </label>
      </div>
    </div>
  </div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
    <button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
  </div>


  </div>
</div><!--end of container-fluid-->  
 
  </div>
</body>

我在以下答案中收到了一些建议，使其在 bootstrap3 中看起来像中心对齐，但是我也使用上述方法发现了一些陷阱，如下图所示。

单选标签中的 Answer text 和 Quiz Title 文本长度都是可变的，因此在这种情况下，要使其居中对齐同时保持响应，这是一个棘手的部分使用 CSS。

【问题讨论】：

添加 .radio 类 {text-align:center;}

标签： javascript html css forms twitter-bootstrap-3

【解决方案1】：

添加一些 CSS

.radio{display:inline-block;}

使用text-center 将Class radio parent div 添加到col-xs-12

【讨论】：

你的意思是jsfiddle.net/a6j7p0et/2 但它使所有元素居中对齐，我希望单选按钮的组容器居中对齐，同时保持内部文本左对齐。或者你能更清楚地解释一下吗？
如何将 class=center-block 添加到 div class=form-group 然后添加
remove text-center change class "col-sm-12" to "col-sm-7" & add class "col-sm-offset-5" jsfiddle.net/a6j7p0et/3

【解决方案2】：

您是否尝试将“col-xs-12”类更改为“col-xs-8 col-xs-offset-4”以使其居中？

【讨论】：

jsfiddle.net/a6j7p0et/6 使用“col-sm-7”查看上述建议并添加类“col-sm-offset-5”类设置，但是，col-xs-offset -* 方法似乎不够智能，无法适应不同长度的文本。

【解决方案3】：

您可以通过将所有单选按钮 div 包装在父 div 中来实现此目的。然后使用 offset 将此 div 相应地放置到设备上。

 <div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
   //.. all your radio buttons div's inside this
 <div>

下面是工作的sn-p。检查一下。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
  <div class="main-content">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
          <h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
        </div>
        <div class="form-group">
          <input type="hidden" name="Q2[cat]" value="Conscientiousness">
        </div>
        <div class="form-group">
          <input type="hidden" name="Q2[POST_ID]" value="88">
        </div>
        <div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
          <div class="col-xs-12   ">
            <div class="form-group">
              <div class="radio">
                <label for="Q2[score]" class="">
                  <input type="radio" name="Q2[score]" value="1" required="required">Agree
                </label>
              </div>
            </div>
          </div>
          <div class="col-xs-12   ">
            <div class="form-group">
              <div class="radio">
                <label for="Q2[score]&quot;" class="">
                  <input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
                </label>
              </div>
            </div>
          </div>
          <div class="col-xs-12 ">
            <div class="form-group">
              <div class="radio">
                <label for="Q2[score]" class="answered">
                  <input type="radio" name="Q2[score]" value="3" required="required">Disagree
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear-both" style="clear:both;"></div>
      <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
          <button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
        </div>


      </div>
    </div>
    <!--end of container-fluid-->

  </div>
</body>

【讨论】：