如何在 Tailwind css 中对齐文本答案

【问题标题】：How to align Text in Tailwind css如何在 Tailwind css 中对齐文本
【发布时间】：2021-09-02 18:36:20
【问题描述】：

使用 Tailwind css，我试图在两侧对齐图像和文本，无论文本如何，图像和文本开始位置都不应改变。你能告诉我我错过了什么或做错了什么吗？

代码： https://play.tailwindcss.com/kFSxJ8tMdD

【问题讨论】：

【解决方案1】：

也许你可以试试这个。

使用content-start 将行打包到容器中，使其与交叉轴的起点相对：

<div class="h-48 flex flex-wrap content-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

使用content-center 将行打包到交叉轴中心的容器中：

<div class="h-48 flex flex-wrap content-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

使用content-end 将行打包到容器中，使其靠在交叉轴的末端：

<div class="h-48 flex flex-wrap content-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

使用content-between 在容器中分配行，使每行之间的空间相等：

<div class="h-48 flex flex-wrap content-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

使用content-around 在容器中分配行，使每行周围的空间相等：

<div class="h-48 flex flex-wrap content-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

使用content-evenly 在容器中分配行，这样每个项目周围的空间相等，但也考虑到使用content-around 时每个项目之间通常会看到的空间加倍：

<div class="h-48 flex flex-wrap content-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

【讨论】：