顺风对齐项目答案

【问题标题】：Align items with tailwind顺风对齐项目
【发布时间】：2021-07-15 03:30:37
【问题描述】：

我是使用 Tailwind 的新手，我有一个包含两行输入的简单文本

代码：

<div>
<div
      class="text-center p-4 flex flex-col space-x-5 space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:justify-center"
    >
      <p class="text-center">Value:</p>
      <div class="w-40">
        <input
          v-model="model.currentValue"
          class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10"
        />
      </div>
    </div>
    <div
      class="text-center p-4 flex flex-col space-x-5 space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:justify-center"
    >
      <p class="text-center">Daily Value to upload:</p>
      <div class="w-40">
        <input
          v-model="model.incrementBy"
          class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10"
        />
      </div>
      <button @click="update">Upload</button>
    </div>
    </div>

如您所见，两个文本没有垂直对齐，输入相同

issue

如何将文本左对齐并将其居中输入？问候

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

为此使用 CSS 网格：

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

<div class="p-4 grid grid-cols-2 gap-x-2">
  <p class="text-right my-2">Value:</p>
  <div class="text-left">
    <input v-model="model.currentValue" class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10" />
  </div>
  <p class="text-right my-2">Daily Value to upload:</p>
  <div class="text-left">
    <input v-model="model.incrementBy" class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10" /><button @click="update">Upload</button>
  </div>
  
</div>

【讨论】：