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..

    Show div only on Homepage using only JS & CSS

    How to center social buttons in bootstrap login page?

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How to Detect css by iPhone/iPad

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    CSS exit box how to? [closed]

    How to Fix this CSS and Center the Menu Horizontally?

    android - How to build complex views that stretch?

    How can I stop an image element from taking 100% width?

    How to implement Star Rating in Intel XDK by App Framework 3.0

    CSS/HTML menu not showing correctly

    How to have the nav and footer more than 1000px?

    How do I eloquently toggle a show/hide event in a list of multiple collapsible items with jQuery?

    How do you set a JavaScript onclick event to a class with css

    How do I set a block of text to drop to a new line all at once?

    How put div element to bottom of another div element

    How to get this code to behave differently based on what exactly is clicked?

    How to position text on image using position as absolute while container width being in percent

    How do I animate background image size on hover smoothly in css?

    How to adjust contents to automatically fit size of the screen?

    How do you get multiple views in one window like JSFiddle does [closed]

    How to crop image with css

    how to implement list bullets in CSS [closed]

    How can I display an alert with the position of the element that was clicked?

    How to make a background with 2 gradients in CSS

    How to place 2 div side by side (alternative solution)

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How to position an image of different size using css?

    How to make jQuery add css dynamaically on window resize