Center label with checkbox when several lines using Tailwind CSS

user_5732454 0
Viewed 2478

I have a checkbox with a label that sometimes are more than one line. How do I align the first line center to the checkbox

<label class="inline-block">
<input class="ml-2 mr-1 mb-1 inline-block" data-id="{{inputDataId}}" type="checkbox" class="{{class}}" {% if required %} required {% endif %}>
<span class="text-sm inline-block">
  {{label}}
</span>
</label>

I only get it to look like this: enter image description here

tailwind-css css html
2 Answers

Tailwind solution

Using Tailwing, you should get the result you want with this:

<label class="flex">
<input class="ml-2 mr-1 mb-1 mt-1 inline-block" data-id="{{inputDataId}}" type="checkbox" class="{{class}}" {% if required %} required {% endif %}>
<span class="text-sm inline-block">
 sdfsd fsd fsd fsdfds fsdf sdf s fsdfsdf
</span>
</label>

Custom CSS solution:

By positioning your label tag with flex positioning, you can easely have a vertical alignement for the input and the text using "align-items: flex-start;" :

<label class="my-label-class">
<input class="ml-2 mr-1 mb-1 inline-block" data-id="{{inputDataId}}" type="checkbox" class="{{class}}" {% if required %} required {% endif %}>
<span class="text-sm inline-block">
  {{label}}
</span>
</label>

.my-label-class {
  display: flex;
  align-items: flex-start;
}

Bootsrap solution

Or if you use Boostrap, you can replace your Label tag classes by Boostrap ones:

 <label class="d-flex align-items-start">

Then your input and text will be aligned to top.

You can align them centered using "align-items-center"

user_54928990

You need to add flex items-top to the wrapper and remove the mb-1 of the input

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@0.5.2/dist/tailwind.min.css">


<label class="flex items-top">
        <input class="ml-2 mr-1 inline-block" data-id="{{inputDataId}}" type="checkbox" class="{{class}}" {% if required %}
    required {% endif %}>
        <span class="text-sm inline-block">
            Dsfsd fsdfsdfs fsdfsdfsd sdfsdfs sdfsdfsdf sdf sdf dsfsd fsdfsdfs fsdfsdfsd sdfsdfs 
            sdfsdfsdf sdf sdf dsfsd fsdfsdfs
            fsdfsdfsd sdfsdfs sdfsdfsdf sdf sdf dsfsd fsdfsdfs fsdfsdfsd sdfsdfs sdfsdfsdf sdf sdf
       </span>
    </label>

user_144922280
Related