How can I align my checkbox with css?

Question

I need to do a form with checkboxes and a list. I used Bootstrap for my checkbox and list, but the problem is that the text and the checkbox are unaligned.

<div id="ContForm">
    <div id="Cajamitad1">
      <div class="checkbox">
        <label>
        <input type="checkbox" value="">Soy Vegano
        </label> 
      </div>

      <div class="checkbox">
        <label>
        <input type="checkbox" value="">Soy diabetico
        </label> 
      </div>    
    </div>

    <div id="Cajamitad2">
    <select class="form-control">
            <option>1</option>
            <option>2</option>
    </select>
    </div>

</div>

How can I align them?

try putting them both, the label and the checkbox in the class 'form-control'. — Grizzly
– Grizzly, Commented Mar 17, 2016 at 0:53
Your code looks fine here: bootply.com/pzubYV8xfi, are you using any custom CSS? — crunch
– crunch, Commented Mar 17, 2016 at 0:55
Please include your CSS in the question, otherwise we won't be able to answer it. — TylerH
– TylerH, Commented Mar 17, 2016 at 1:11
You must have other CSS interfering with the Bootstrap classes as everything looks good in this JSFiddle. — hungerstar
– hungerstar, Commented Mar 17, 2016 at 3:29

zer00ne · Accepted Answer · 2016-03-17 02:29:35Z

1

You can use the classes provided by bootstrap.css like form-control or you can try this:

input {
  vertical-align: middle;
  line-height: 1;
}

This CSS ruleset says,"Every input element will be vertically aligned to the middle, and has the equivalent height of an uppercase letter."

input {
  vertical-align: middle;
  line-height: 1;
}

<div id="ContForm">
  <div id="Cajamitad1">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">Soy Vegano
      </label>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">Soy Diabetico
      </label>
    </div>
  </div>

  <div id="Cajamitad2">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

</div>

answered Mar 17, 2016 at 2:29

zer00ne

45.3k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ThrowingDwarf Over a year ago

However i am still wondering why there are so many divs nested in eachother.

zer00ne Over a year ago

I see that a lot with Bootstrap markup, doesn't say much semantically. Which by the way is more or less a guideline and not a way of life as some would have others believe. I don't like using a ton of divs, but I try not to push the subject with people new to code, they'll find out how clunky code can get later on like I did.

ThrowingDwarf Over a year ago

True, im just glad it isnt just a table, even though it can be extremely convenient for long forms sometimes. Clever use with sections etc. can be of great help too.

zer00ne Over a year ago

I like fieldsets even though Firefox does not.

ThrowingDwarf Over a year ago

firefox has more than just one bug tbh. Just read a post about this 3 seconds ago.

Collectives™ on Stack Overflow

How can I align my checkbox with css?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related