[html] How to align the checkbox and label in same line in html?

Within li tags, I am placing a checkbox and label input.

If label text is larger than label, the text goes to the next line.

I wrapped the label text but it's not aligning the checkbox and label in the same line if label text is too long.

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label style="word-wrap:break-word">testdata</label>
</li>

Thanks,

Use below css to align Label with Checkbox

    .chkbox label
            {
                position: relative;
                top: -2px;
            }

<div class="chkbox">
<asp:CheckBox ID="Ckbox" runat="server" Text="Check Box Alignment"/>
</div>

Just place a div around the input and label...

    <li>
      <div>
        <input id="checkid"  type="checkbox" value="test" />
      </div>
      <div>
        <label  style="word-wrap:break-word">testdata</label>
      </div>
    </li>

You should use <label for=""> for the checkboxes or radios, and to align checkboxes vertical-align is enough

Try changing your markup to this

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label for="checkid">testdata</label>
</li>

<li>
    <input id="checkid2" type="checkbox" value="test" />
    <label for="checkid2">testdata 2</label>
</li>

And set CSS like

input[type="checkbox"]
{
    vertical-align:middle;
}

In case of long text

label,input{
    display: inline-block;
    vertical-align: middle;
}

Side note: In label, value of for must be the id of checkbox.

Fiddle

Updated Fiddle

None of these suggestions above worked for me as-is. I had to use the following to center a checkbox with the label text displayed to the right of the box:

<style>
.checkboxes {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  word-wrap: break-word;
}
</style>

<label for="checkbox1" class="checkboxes"><input type="checkbox" id="checkbox1" name="checked" value="yes" class="checkboxes"/>
Check the box.</label>

Wrap the checkbox with the label and check this

HTML:

<li>
     <label for="checkid"  style="word-wrap:break-word">
        <input id="checkid"  type="checkbox" value="test" />testdata
     </label>
</li>

CSS:

[type="checkbox"]
{
    vertical-align:middle;
}

http://jsfiddle.net/pKD9K/1/

Use this in your li style.

style="text-align-last: left;"

Please try it

<li>
<input id="checkid" type="checkbox" value="test" style="float: left;">
<label style="word-wrap: break-word; line-height: 16px; float: left;">testdata</label>
</li>

Another approach here:

.checkbox-wrapper {
  white-space: nowrap
}
.checkbox {
  vertical-align: top;
  display:inline-block
}
.checkbox-label {
  white-space: normal
  display:inline-block
}

<div class="text-left checkbox-wrapper">
  <input type="checkbox" id="terms" class="checkbox">
  <label class="checkbox-label" for="terms">I accept whatever you want!</label>
</div>

If you are using bootstrap wrap your label and input with a div of a "checkbox" or "checkbox-inline" class.

<li>
    <div class="checkbox">
        <label><input type="checkbox" value="">Option 1</label>
    </div>
</li>

Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

If you are using bootstrap then use this class in the holding div

radio-inline

Example:

<label for="active" class="col-md-4 control-label">Active</label>
<div class="col-md-6 radio-inline">
    <input type="checkbox" name="active" value="1">
<div>

Here the label Active and the checkbox will appear to be aligned.

I had the same problem, but non of the asweres worked for me. I am using bootstap and the following css code helped me:

label {
 display: contents!important;
}