How to align checkboxes labels

Question

The labels of checkboxes are not properly aligned? IMG 1 labels are properly aligned but not for IMG 2.How to align them?

Properly aligned text label of checkbox

misaligned label of checkbox

The code can't be shared but could you please mention some CSS tricks or HTML tricks to resolve this issue. Already tried white-space still no luck. — ImRaN JB, May 29 '17 at 13:52
You should create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) so we can help you and not make the work for you — Paolo Forgia, May 29 '17 at 13:54
why can't you share the code? *"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself."* https://stackoverflow.com/help/on-topic — Michael Coker, May 29 '17 at 13:56
Possible duplicate of [How to align checkboxes and their labels consistently cross-browsers](https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) — Rob, May 29 '17 at 13:56

score 0 · Answer 1 · answered May 29 '17 at 14:00

You can use table

<table>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td class="text">Some Long Texttttttttttt</td>
    </tr>
  </tbody>
</table>

SNIPPET

.text{
   width:100px;
}

<table>
  <tbody>
    <tr><td><input type="checkbox"></td><td class="text">Some Long Texttttttttttt</td></tr>
  </tbody>
</table>

score 0 · Answer 2 · answered May 29 '17 at 14:02

0

Use the css

display:inline-block

for both checkbox and text,Make sure that you include them with in a common div for those checkbox and text.

answered May 29 '17 at 14:02

Hi Rajmal, I tried display function but inline-block was not helping. However, inline-flex was making it aligned but making the text font and checkbox size small – ImRaN JB May 31 '17 at 06:19

2 Answers2