Tailwind：如何将容器中的文本与非全角父级对齐？

Answer 1

<script src="https://cdn.tailwindcss.com/3.4.4"></script>

<div class="container mx-auto">
  the in the right position
</div>

<div  class="bg-cyan-300 w-10/12 lg:w-9/12 rounded-r-full pb-3 py-4 flex justify-between pl-2 pr-5 items-center">
  <h2 class="mx-auto text-black text-lg lg:text-2xl xl:text-3xl -ml-2 sm:pl-[calc((100cqw-theme(screens.sm))/2)] md:pl-[calc((100cqw-theme(screens.md))/2)] lg:pl-[calc((100cqw-theme(screens.lg))/2)] xl:pl-[calc((100cqw-theme(screens.xl))/2)] 2xl:pl-[calc((100cqw-theme(screens.2xl))/2)]">
    THIS TEXT HAVE TO BE ALIGN
  </h2>
</div>

• 应用

  -ml-2

  取消父级上的

  pl-2

  。
• 对于每个后续媒体查询：
  1. 找出

     max-width

     的

     container

     与视口宽度 (

     100cqw - theme(screens.sm)

     ) 之间的差异。
  2. 将此结果减半 (

     / 2

     )。
  3. 将其应用到

     padding-left

     以使文本在左边缘对齐。

Answer 2

处于正确的位置 该文本必须对齐