垂直对齐复选框/收音机输入与他们的标签

我如何垂直对齐我的复选框与他们在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布局等等，这些使我迄今为止阅读的所有解决方案都过时了。

来源

2017-04-09 ncohen

的可能的复制[如何对齐复选框和其标签一致跨浏览器]（http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers）和[主机其他人通过搜索发现]（http://stackoverflow.com/search?q=align+checkbox+with+label） – Rob

@Rob感谢您指出了现有的问题，但我正在寻找一个特定的bootstrap v4解决方案.. 。并找不到 – ncohen

添加一个类名.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="[email protected]" 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="[email protected]" 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="[email protected]" 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>

来源

2017-04-09 20:20:19 repzero

垂直对齐复选框/收音机输入与他们的标签

回答

相关问题