时间戳

首页 > 解决方案 > 多行使用 Tailwind CSS 时带有复选框的居中标签

html - 多行使用 Tailwind CSS 时带有复选框的居中标签

问题描述

我有一个带有有时不止一行的标签的复选框。如何将第一行中心对齐到复选框

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

我只让它看起来像这样： 在此处输入图像描述

标签： htmlcsstailwind-css

解决方案

顺风解决方案

使用 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 解决方案：

通过使用 flex 定位标签来定位标签，您可以使用“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;
}

引导解决方案

或者，如果您使用 Boostrap，您可以用 Boostrap 替换您的 Label 标签类：

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

然后您的输入和文本将与顶部对齐。

您可以使用“align-items-center”将它们居中对齐

推荐阅读