How to use CSS to align a custom check box with its label?


Tags: html,css,html5,css3

Problem :

I have added some custom, larger, check boxes to my page but the labels do not align vertically with check boxes. None of the solutions I've found using Google works. I'm looking for an HTML/CSS solution and I'm a web page novice.

What am I missing?

EDIT: I did indeed attempt to use the solution and other proposed solutions in the popular post another question but the solutions are for a simple checkbox and I'm using a custom checkbox. I've spent a couple hours attempting to fold that and other solutions on that post and other posts into my HTML and CSS but the checkbox and the label remain in lockstep with the label aligned to the the top of the checkbox. My code is demonstrably more complex than the examples and I do not understand how to incorporate any of the suggested solutions.

An HTML snippet:

 <div class="checkbox">
   <input id="check1" type="checkbox" name="check" class=misc-chk-btn value="check1">
   <label for="check1">/dev/media/usb0&nbsp;BACKUP1</label>
   <input id="check2" type="checkbox" name="check" class=misc-chk-btn value="check2">
   <label for="check2">/dev/media/usb0&nbsp;no&nbsp;label</label>
 </div>

CSS:

input[type=checkbox] { display: none;}

.checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    font-size: 1.1em;

}

.checkbox label:before {
    content: "";
    display: inline-block;

   /* size the check boxes */
    width: 24px; 
    height: 24px;

    border-radius: 6px; 
    margin-right: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 1px;
    background-color: #afa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

input[type=checkbox]:checked + label:before {
    content: "\2713";  /* check char */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 1.1em;
    color: black;
    text-align: center;
    line-height: 24px;
}


Solution :

You're absolutely positioning the checkbox. Can't you just leave it display:inline and add vertical-align:middle?

input[type=checkbox] { display: none;}

.checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    /*padding-left: 30px; Probably not needed anymore */
    margin-right: 15px;
    font-size: 1.1em;

}

.checkbox label:before {
    content: "";
    display: inline-block;

   /* size the check boxes */
    width: 24px; 
    height: 24px;

    border-radius: 6px; 
    margin-right: 10px;
    /*  this stuff is unnecessary
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 1px; */
    background-color: #afa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);

    /*just use vertical align*/
    vertical-align: middle;
}

input[type=checkbox]:checked + label:before {
    content: "\2713";  /* check char */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 1.1em;
    color: black;
    text-align: center;
    line-height: 24px;
}
<div class="checkbox">
   <input id="check1" type="checkbox" name="check" class=misc-chk-btn value="check1">
   <label for="check1">/dev/media/usb0&nbsp;BACKUP1</label>
   <input id="check2" type="checkbox" name="check" class=misc-chk-btn value="check2">
   <label for="check2">/dev/media/usb0&nbsp;no&nbsp;label</label>
 </div>


    CSS Howto..

    css - how to fix first td in table on top if the second td has multiline?

    How to center vertically and horizontally a heading text using flask-bootstrap

    How to unbind element then allow that element to bind again

    How to get menu text vertically aligned with inherited height

    How to float menu list elements

    How to use a defined property value as another property in pure CSS?

    How to make inner div of Flexbox height of parent

    How to make all images look same

    How do I increase the height of a menu divider in a navigation?

    Bootstrap css, how to make always visible navbar-toggle?

    How to hide only a part of the content of a li with CSS?

    How to figure out what is the right target to put in CSS

    CSS How to get rid of border that appears around custom button on and after click

    How to select an element's great-grandchild for CSS rules?

    How to make div 10% of device screen height css

    How to use CSS :not() properly?

    how to remove some css attributes defined by bootstrap

    How to scroll a page or a element using css

    how to make smooth css transition

    How to style CSS for input box's width as a percentage when it has border and padding?

    How to select html5 range's pseudo-elements in JavaScript

    How to make HTML table cells expand horizontally beyond end of page?

    CSS Selector-How to locate Parent Element

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to fit a button to a hover box? And the button is not displaying properly?

    CSS: How to remove enter from HTML?

    How to add / remove html elements and content based on the browsing device?

    How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

    How can I make editable fields with button?

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver