複選框和標籤對齊

Question

所以我有一個小問題，我似乎無法弄清楚該怎麼做。我有一個複選框和一個標籤。我想將標籤降低幾個像素，而不用觸摸複選框。

我該如何實現這個代碼結構 - 這裏是Fiddle？

而這裏的代碼：

<div class="form-check"> 
    <span class="custom-checkbox-container mr-2"> 
    <input type="checkbox" id="first_checkbox"> 
    <label for="first_checkbox">Checkbox</label> 
    </span> 
</div> 

.form-check {  
    margin-bottom: 0; 
    margin-top: 3px; 
.custom-checkbox-container { 
    input[type="checkbox"] { 
    display: none; 
    & + label { 
     position: relative; 
     font-family: 'Open Sans', sans-serif; 
     letter-spacing: 0.5px; 
     font-size: 10px; 
     color: #292a2c; 
     text-transform: uppercase; 
     font-weight: 700; 
    } 
    & + label:before { 
     content: " "; 
     box-sizing: border-box; 
     display: inline-block; 
     vertical-align: middle; 
     width: 20px; 
     height: 20px; 
     margin-right: 8px; 
     border: 2px solid #787878; 
    } 
    & + label:after { 
     content: " "; 
     opacity: 0; 
     position: absolute; 
     width: 12px; 
     height: 7px; 
     top: 4px; 
     left: 4px; 
     background: transparent; 
     border: 2px solid #787878; 
     border-top: none; 
     border-right: none; 
     transform: rotate(-45deg); 
     transition: opacity .3s; 
    } 
    &:checked + label:after { 
     opacity: 1; 
    } 
    } 
    } 
} 

謝謝！

Answer 1

你可以嘗試添加標籤

<label for="first_checkbox"> 
    <span>Checkbox</span> 
</label> 

和CSS

label>span { 
    position: relative; 
    bottom: -2px; 
} 

Answer 2

您可以絕對定位的複選框內的額外span，然後就在labelhttps://jsfiddle.net/9gr4pv69/4/