无法将单选按钮对齐到中心（垂直）[重复]

Posted 2023-03-06

【中文标题】无法将单选按钮对齐到中心（垂直）[重复]

【英文标题】：Cannot align radio button to center (vertically) [duplicate]

【发布时间】：2019-03-09 13:27:27

【问题描述】：

我创建了一个由两列组成的结构，第一列有三个单选按钮，我需要对齐到中心（垂直），第二列包含一些输入字段。

结构有如下配置：

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="mt-3 content-checkbox">
      <div class="custom-control custom-radio">
        <input type="radio" id="foo" name="test" checked class="custom-control-input">
        <label class="custom-control-label" for="foo">Foo</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" id="foo1" name="test" class="custom-control-input">
        <label class="custom-control-label" for="foo1">Foo</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" id="foo2" name="test" class="custom-control-input">
        <label class="custom-control-label" for="foo2">Test</label>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="mt-3 text-center">
      <div class="form-group">
        <div class="form-group">
          <label>Foo1</label>
          <input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
        </div>
        <div class="form-group">
          <label>Foo2</label>
          <input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="'format': 'DD/MM hh:mm A'">
        </div>
      </div>
    </div>
  </div>
</div>

如你所见，结果是这样的：

enter image description here

如何将单选按钮垂直居中对齐？

这是JSFIDDLE。

【问题讨论】：

@KOPPER 您好，欢迎来到 Stack Overflow！您的问题已因重复而关闭。如果链接的问题对您没有帮助，您可以编辑这个问题，解释它是如何没有帮助的。像这样的编辑会让你的问题得到审查，并可能重新打开它。请不要因为重复关闭用户而生气，他们是像您一样试图管理网站的用户。重复的问题并不坏，因为它们指向答案。有许多重复的问题意味着好的答案会分布在许多问题上。重复关闭旨在在一个地方收集答案。

如果您阅读原始问题中的其他答案，您会发现它们是重复的，并且解决方案是相同的.. 使用 align-items-center justify-content-center 类。您似乎也在问同样的问题（也已经使用另一个帐户回答了）。

【参考方案1】：

您可以将以下类添加到列中（带有单选按钮的类。）它会起作用：

d-flex align-items-center justify-content-center

您可以找到有关这些类和更多弹性选项的更多信息here。通过这种方式，您甚至可以找到更多可以为您提供进一步帮助的自定义设置。

【讨论】：

看来可行，谢谢