How to align a label with checkbox

Question

span{
text-align: justify;
}

<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>

I want to align the label for excessive reinforcement checkbox like image2

For example

Thanks in advance

Please [learn to love actual label elements](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/) — Quentin, Jun 27 '16 at 10:17
check this one: http://stackoverflow.com/questions/6293588/how-to-create-an-html-checkbox-with-a-clickable-label — Varun Sharma, Jun 27 '16 at 10:21
You could wrap your checkbox inside a label element with the text inside. — Arathi Sreekumar, Jun 27 '16 at 10:23
From next question onwards, try to be more descriptive. Nobody knows, what is your image 2 here. In Stack Overflow, while asking question there is option to insert inline images as well. — Deepak Yadav, Jun 27 '16 at 10:29

Gaurav Aggarwal · Answer 1 · 2016-06-27T10:30:58.773

2

First of all use <label> instead of <span>.

If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.

label{
   text-align: justify;
   float: left;
   line-height: 20px;
}
input{
    float:left;
}

<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>

Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.

If you can change the HTML

The best and new method to use checkbox is

<label><input type="checkbox" name="type">Excessive Reinforcement</label>

edited Jun 27 '16 at 10:30

answered Jun 27 '16 at 10:20

Gaurav Aggarwal

9,809
6
36
74

check my code in snippet its fine in 2 lines...please make a fiddle of your code – Gaurav Aggarwal Jun 27 '16 at 10:31

score 1 · Answer 2 · answered Jun 27 '16 at 10:24

This is one way of doing it:

<label for="type-1">
   <input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>

When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.

score 1 · Accepted Answer · answered Jun 27 '16 at 10:26

span {
  text-align: justify;
}
.make-table {
  display: table-cell;
  /* make it behave like table-cell. so that they fall beside each other. */
}

<div class="any-class">
  <label><span class="make-table"><input type="checkbox" name="type"></span>
    <span class="make-table">Excessive<br> Reinforcement</span>
  </label>
</div>

<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
  <br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>

Make this simple change!

@GowmathiBaskaran If it worked for you, you can mark this post as correct Answer ! — Deepak Yadav, Jun 27 '16 at 13:09

How to align a label with checkbox

3 Answers3