php - 如何在相同按钮位置的中心动态对齐单选按钮？

Question

我正在使用 bootstrap 设置一个在线测验，用户会在其中得到一个有 4 种不同答案可能性的问题。 每个答案都是一个带有相应答案的单选按钮，由 PHP 响应。 我的目标是将每个可能的答案置于卡片正文的中央，但单选按钮的圆圈位于相同的边距上。

只是一个带有 2 个硬编码单选按钮的示例:

 <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

<div class="container">
    <div class="card">
        <div class="card-body" align="center">
            <form method="post">
                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="answer" value="1">
                            Long answer, normally echoed by php
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="answer" value="2">
                            answer echoed by php
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>

1) 我已经在卡片正文中尝试了 align="center"(见代码)，这使单选按钮以其文本字段为中心，因此按钮本身没有相同的边距，结果是 https://imgur.com/cPpUNZv .

2) 我还在 radio 的每个 div 中尝试了 style="left: 45%"。这会将实际的单选按钮放在相同的边缘，但如果 PHP 显示的答案稍长一点，它看起来根本不会居中，请参见 https://imgur.com/XrtdO23 .

目标:我需要的是第一个单选按钮像方法 1) 一样居中的方法，并且随后的单选按钮将它们自己定位为与第一个单选按钮相同的左边距。通过这样做，第一个 radio 总是居中并且所有 radio 的单选按钮都在相同的边距上，就像 here 一样。 .

我想这必须通过某种 css 类配置来实现，以便随着 PHP 输出长度的变化保持动态。

Answer 1

您可以通过在卡片正文中添加 d-flex 和 justify-content-center 类轻松地做到这一点

例子

    <div class="card-body d-flex justify-content-center">

完整示例:

 <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

<div class="container">
  <div class="card">
    <div class="card-body d-flex justify-content-center">
      <form method="post">
        <div class="form-check">
          <label class="form-check-label">
            <input
              class="form-check-input"
              type="radio"
              name="answer"
              value="1"
            />
            Long answer, normally echoed by php
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input
              class="form-check-input"
              type="radio"
              name="answer"
              value="2"
            />
            answer echoed by php
          </label>
        </div>
      </form>
    </div>
  </div>
</div>

并且无论您的答案有多大或多小，单选按钮将始终位于同一垂直线上并根据最长的答案居中。答案本身总是从它的单选按钮开始