Блог

У меня есть флажок с меткой, которые иногда составляют более одной строки. Как мне выровнять центр первой строки по флажку

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

Я только понимаю, что это выглядит так:

Вам нужно добавить flex items-top в оболочку и удалить mb-1 из ввода

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

Решение Tailwind

Используя Tailwing, вы должны получить желаемый результат с помощью этого:

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

Пользовательское решение CSS:

Расположив свой тег label с помощью гибкого позиционирования, вы можете легко выровнять ввод и текст по вертикали с помощью «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

Или, если вы используете Boostrap, вы можете заменить свои классы тегов Label на классы тегов Boostrap:

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

Тогда ваш ввод и текст будут выровнены по верху.

Вы можете выровнять их по центру, используя «align-items-center»