垂直对齐 checkbox/radio 输入及其标签

Question

如何在 bootstrap v4 中将我的复选框与其标签垂直对齐？我有以下示例：

https://plnkr.co/edit/TmD0ffKrk32oy7etD8g0?p=preview

或

<body style='font-size:200%'>
    <div class="form-group has-success"'>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
</div>
<div class="form-group has-warning">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
</div>
<div class="form-group has-danger">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
</div>
  </body>

我希望复选框与标签垂直居中的位置

编辑：有些人提到可能重复，但我正在寻找 bootstrap v4 解决方案。 Bootstrap 添加了很多 css 例如 flex layouts 等...这使得我迄今为止阅读的所有解决方案都过时了。

Answer 1

将 class 名称 .container 添加到您的标签和样式中，如下所示：

 .container {
      display: table;
      vertical-align: middle;
    }

    .custom-control-indicator {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top:0;
    }

请参阅下面的代码段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="form-group has-success">
    <label class="custom-control custom-checkbox  container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <div class="form-group has-warning">
    <label class="custom-control custom-checkbox container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <div class="form-group has-danger">
    <label class="custom-control custom-checkbox container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <style>
    .container {
      display: table;
      vertical-align: middle;
    }
    
    .container  .custom-control-indicator {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top:0;
    }
  </style>
</body>

</html>

垂直对齐 checkbox/radio 输入及其标签

Vertical align checkbox/radio input with their label

twitter-bootstrap

twitter-bootstrap-4