如何居中和对齐堆叠的单选按钮答案

【问题标题】：How to center and align stacked radio buttons如何居中和对齐堆叠的单选按钮
【发布时间】：2021-09-08 10:19:34
【问题描述】：

我正在尝试使用带有单选按钮的输入表单，其中每个选项都堆叠在彼此的顶部，并且所有选项都通过单选按钮对齐（中心），而不是按其标签的长度。

我正在寻找的最终结果：

到目前为止，我最好的方法是使用position: absolute 将所有内容居中。像这样。

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center

但是，使用这种方法，选项会受到文本长度的影响。

删除上面的text-align，它完全删除了居中...

【问题讨论】：

请添加您的 HTML 代码。

标签： html css forms radio-button css-position

【解决方案1】：

将三个单选按钮放置在一个容器中，该容器位于另一个容器中。

<body>
  <div class="center-horizonally">
    <div class="radio-btn-container">
      <div class="radio-1">yes</div>
      <div class="radio-2">no</div>
      <div class="radio-3">maybe</div>
    </div>
  </div>
</body>
<style>
  .center-horizonally{
    display: flex;
    justify-content: center;
  }
</style>

最外面的容器有display: flex; 和justify-content: center;，它们将水平居中第二个有按钮的容器。第二个容器保持三个单选按钮在左侧垂直对齐。这可能不是最好的方法，但应该可以。

【讨论】：

【解决方案2】：

使元素居中的最简单方法是在父元素上使用display: flex;，在子元素上使用margin: auto;：

.container
{
  display: flex;
  height: 100vh;
}

.container .middle
{
  display: flex;
  flex-direction: column;
  margin: auto;
}

<div class="container">
  <div class="middle">
    <div>Do you enjoy pizza with pineapple</div>
    <div class="middle">
      <div><label><input type="radio" name="blah">Yay</label></div>
      <div><label><input type="radio" name="blah">Nay</label></div>
      <div><label><input type="radio" name="blah">Never heard of it</label></div>
    </div>
  </div>
</div>

【讨论】：