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布局等......这使我到目前为止所阅读的所有解决方案都已过时。

Answer 1

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

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

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

请参阅下面的代码段

＆＃13;

<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>

＆＃13;

垂直对齐复选框/无线电输入及其标签

1 个答案: