Vertically Aligning a Checkbox

Vertically aligning a checkbox

Vertical alignment only works on inline elements. If you float it, then I don't think it is treated as part of that stream of inline elements any more.

Make the label an inline-block, and use vertical alignment on both the label and the input to align their middles. Then, assuming it is okay to have a specific width on the labels and checkboxes, use relative positioning instead of floating to swap them (jsFiddle demo):

input {
    width: 20px;

    position: relative;
    left: 200px;

    vertical-align: middle;
}

label {  
    width: 200px;

    position: relative;
    left: -20px;

    display: inline-block;
    vertical-align: middle;
}

Align vertically checkboxes with the input fields and labels

based on the final result you want to achieve, I think you should give all the labels you have the same width, so the inputs can adjust to the left of these labels.

this is a sample example :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css" type="text/css">
  <title>Document</title>
</head>
<body>
  <div class="field">
    <label class="label">First name</label>
    <input type="text"/>
  </div>
  <div class="field">
    <label class="label">last name</label>
    <input type="text"/>
  </div>
  <div class="field">
    <label class="label" for="favoriteColor">Favorite Color</label>
    <select name="favoriteColor" id="favoriteColor" class="select-field">
      <option value=""></option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="brown">Brown</option>
    </select>
  </div>
  <div class="field">
       <label class="label">Sauces</label>
        <div class="checkbox-wrapper">
            <div class="checkboxes">
              <input type="checkbox" id="sauces" name="sauces" value="ketchup">
              <label for="ketchup">Ketchup</label>
            </div>
            <div class="checkboxes">
              <input type="checkbox" id="sauces" name="sauces"
                    value="mustard">
                    <label for="mustard">Mustard</label>
            </div>
        </div>
  </div>

</body>
</html>

the style :

.field {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
}
.label {
  width: 130px;
  display: inline-block;
}

width that all the labels should be in the left and have the same width, for the buttons you can put them in flex container and center them,

Vertically center a checkbox within a div

check this jsFiddle

HTML

<div id="read-confirm-box">
  I Have read the above 
  <input type="checkbox" id="checkbox" />
</div>

CSS

#read-confirm-box
{
    color: #FFF;
    width: 180px;
    font-size: 12px;
    background-color: #333;
    border-radius: 3px;
    padding: 6px 11px;
    margin: auto;
    float: left;
}

#checkbox 
{
    position: relative;
    top: 3px;
}

Vertical Middle-Align Checkbox with Multiple Lines Label

You can simply wrap your checkBox and label in a div and use flex and other flex properties to make sure its vertically middle center on the checkbox regardless of the content (label) size.

Using Flex is rec-emended instead of using float property as flex will very responsive in modern browsers and

Live Demo:

.checkbox-label {
  border-radius: 4px;
  padding: .7rem;
  font-weight: 900;
  background-color: #F5F5F6;
  text-align: start;
  color: #525159;
  font-size: 1rem;
}

.check-input {
  margin-top: 5px;
  cursor: pointer;
}

.checkboxxxxx {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="checkboxxxxx">
  <label for="check-input" class="checkbox-label">I travel to multiple locations - at least 5 times a yea I travel to multiple locatieast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locations - at leas - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatio - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatio - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatio - at least 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locatiot 5 times a yeast 5 times a yea I travel to multiple locations - at least 5 times a yea I travel to multiple locations - at least 5 times a yons - at least 5 times a yea I travel to multiple locations - at least 5 times a yea </label>
  <input id="check-input" class="check-input" type="checkbox" value="6" />
</div>

How to vertically align checkbox with other input controls in the form?

As simple as

<div class="row form-group">
    <div class="col-md-11 offset-md-1">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="released" name="released">
            <label class="form-check-label" for="released">Released</label>
        </div>
    </div>
</div>

Sample Image

demo: https://jsfiddle.net/davidliang2008/L1krytub/4/

IMO, I kind of think col-md-1 is not wide enough for your labels though.

How to align vertically input field text and checkbox?

As Bootstrap 4 documentation. Seen here https://getbootstrap.com/docs/4.0/utilities/flex/
you can use class="d-flex align-items-center".
I added style="border: 1px solid black; height:200px;" to demonstrate.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="form-row d-flex align-items-center" style="border: 1px solid black; height:200px;">  <div class="form-group col-6">    <label for="Addr">Address:</label>    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">  </div>  <div class="form-group col-6 ">    <div class="custom-control custom-checkbox ">      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>    </div>  </div></div>

How to align checkboxes and their labels consistently cross-browsers

Warning! This answer is too old and doesn't work on modern browsers.

_{I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).}

As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).

After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

Inputs must be on their own line.
Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

Before I get into any explanation, I'll just give you the code:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Vertically align checkboxes dynamically

Option 1:

Add style="display:none" to the br tag as well:

<h1>Show Checkboxes</h1>
<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">  <label for="vehicle1"> I have a bike</label>  <br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">  <label for="vehicle2"> I have a car</label>  <br>

  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">  <label for="vehicle3" style="display: none"> I have a boat</label>  <br style="display:none">

  <input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">  <label for="vehicle4"> I have a motor</label>  <br>    <br>  <input type="submit" value="Submit"></form>

Vertically Aligning a Checkbox