CSS/HTML checklist content alignment

Question

I'm having difficulty with the following code - everything works as I wish it EXCEPT the contents of the check boxes. The ticks and crosses are too low.

Can someone tell me what I am doing wrong here please? I admit I hacked this code from several sources and glued it together, so I'm more than happy to admit I have misunderstood something or other.

Thanks!

 .checkbox { display: inline-block; float: left; width: 25%; font-size: 16px; line-height: 36px; text-align: left; } input[type=checkbox] { display: none; }.checkbox:before { display: inline-block; width: 18px; height: 18px; content: "\2715\0020"; background-color: #f3f3f3; color: #000000; text-align: center; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); border-radius: 3px; margin: 0px 10px 0px 0px; vertical-align: middle; } input[type=checkbox]:checked+.checkbox:before { color: #f3f3f3; background-color: #abcdef; content: "\2714\0020"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); }

 <section> <form> <input id="option1" type="checkbox"> <label class="checkbox" for="option1">Unchecked</label> <input id="option2" type="checkbox" checked> <label class="checkbox" for="option2">Checked, changeable</label> <input id="option3" type="checkbox" checked disabled> <label class="checkbox" for="option3">Checked, fixed</label> <input id="option4" type="checkbox" checked disabled> <label class="checkbox" for="option4">Checked, fixed</label> <input id="option5" type="checkbox"> <label class="checkbox" for="option5">Unchecked</label> </form> </section>

Answer 1

Add line-height: 1.2; to your .checkbox:before :

.checkbox:before {
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "\2715\0020";
    background-color: #f3f3f3;
    color: #000000;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
    margin: 0px 10px 0px 0px;
    vertical-align: middle;
    line-height: 1.2; /* add this*/ 
}

Answer 2

 .checkbox { display: inline-block; float: left; width: 25%; font-size: 16px; line-height: 36px; text-align: left; } input[type=checkbox] { display: none; }.checkbox:before { display: inline; padding:2px; width: 18px; height: 18px; content: "\2715\0020"; background-color: #f3f3f3; color: #000000; text-align: center; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); border-radius: 3px; margin: 0px 10px 0px 0px; vertical-align: middle; } input[type=checkbox]:checked+.checkbox:before { color: #f3f3f3; background-color: #abcdef; content: "\2714\0020"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); }

 <section> <form> <input id="option1" type="checkbox"> <label class="checkbox" for="option1">Unchecked</label> <input id="option2" type="checkbox" checked> <label class="checkbox" for="option2">Checked, changeable</label> <input id="option3" type="checkbox" checked disabled> <label class="checkbox" for="option3">Checked, fixed</label> <input id="option4" type="checkbox" checked disabled> <label class="checkbox" for="option4">Checked, fixed</label> <input id="option5" type="checkbox"> <label class="checkbox" for="option5">Unchecked</label> </form> </section>

Answer 3

Add line-height to .checkbox:before{...} set it to 20px, or play this number,

.checkbox:before {
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "\2715\0020";
    background-color: #f3f3f3;
    color: #000000;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
    margin: 0px 10px 0px 0px;
    vertical-align: middle;
    line-height: 20px;
}