垂直對齊複選框/收音機輸入與他們的標籤

我如何垂直對齊我的複選框與他們在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

垂直對齊複選框/收音機輸入與他們的標籤

回答

相關問題