Custom checkboxes, aligning label middle - html

Question

I'm having problem aligning my labels to the middle of the checkboxes. I have tried everything it seems and after hours of testing i'm finally giving up.
I have tested with display: inline-block, vertical-align: middle; but nothing seems to work. I have however found out that putting characters into content:'' makes the text float top.
I think i'm missing something...
JSFiddle
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
color: inherit;
font-size: inherit;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 28px;
height: 28px;
background: #cad1d9;
border-radius: 3px;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 0px;
background: white;
width: 3px;
height: 3px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>

Answer 1

Add vertical-align: middle in :before selector and set top position in :after
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
color: inherit;
font-size: inherit;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 28px;
height: 28px;
background: #cad1d9;
border-radius: 3px;
vertical-align: middle;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 3px;
height: 3px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>