38

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,

13 Answers 13

47

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/

0
24

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

2
  • 1
    i am getting issue if label text is large then only label is aligning below of the checkbox. Mar 11, 2014 at 9:56
  • i tried ur code Dhaval,same issue some of the label text aligning below of the checkbox.remaining all are aligning same line as expected but only few of them not aligning properly. Mar 11, 2014 at 10:17
7

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

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;
}
4

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

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>
0
2

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

1

Please try it

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

li input {float: left;}
li label {word-wrap: break-word; line-height: 16px; float: left;}
1
  • downvote due to inline styling
    – Mark
    Oct 14, 2021 at 9:23
0

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

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.

0

This worked for me

CSS

input[type="checkbox"] {
    display: inline-block;
    width: auto;
  }

HTML

<div class="checkbox">
    <input type="checkbox">
    <label>test data</label>
</div>
1
  • 1
    This answer doesn't fix the problem. '<label>' elements content will still break to a new line under the <input> element, if longer than than containing element <div class="checkbox">. Set that elements style to a fixed such as 100px and add some longer text content to <label> to check for yourself.
    – bitski
    Nov 8, 2021 at 18:34
0

This code worked for me

[type="checkbox"] { vertical-align: middle; word-wrap: break-word;margin-left:1% } 

But I had to add margin-left:1% to ensure the checkbox aligns with my other form controls.

-1

Use this in your li style.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.