如何用Tailwind CSS实现副标题不受Logo宽度影响与主标题居中对齐

问题根源是原布局采用justify-between的flex布局，中间内容的位置会被左右两侧元素的实际宽度挤压偏移，上下两行的左右侧宽度规则不统一，自然无法对齐。调整方案如下：

核心调整逻辑 #

• 上下两行统一使用三等分网格布局，替代原有的flex两端对齐布局，强制三列的占位规则上下完全一致
• 左右两列分别负责放logo、跳转链接/占位元素，内容分别左对齐、右对齐，宽度不会挤压中间列的位置
• 中间列统一设置内容水平居中，上下两行的中间列位置完全重合，自然可以实现副标题和主标题永远对齐，不受logo宽度影响

修改后完整代码 #

<!-- 副标题行 -->
<div class="grid grid-cols-3 items-center p-4 pt-10">
  <!-- 左列占位，和下方logo列规则对齐 -->
  <div class="flex justify-start"></div>
  <!-- 中间列副标题，居中 -->
  <p mode="" class="pb-8 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
  <!-- 右列跳转链接，右对齐 -->
  <a href="{{url('/')}}" class="text-green-500 text-lg underline font-bold flex justify-end mr-10 pb-8"></a>
</div>
<!-- 主标题+logo行 -->
<div class="grid grid-cols-3 w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white items-center">
  <!-- 左列logo，左对齐 -->
  <img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
  <!-- 中间列主标题，居中，和上方副标题位置完全对齐 -->
  <h1 class="text-3xl font-semibold text-center">xxxxx</h1>
  <!-- 右列占位，和上方链接列规则对齐 -->
  <div class="flex justify-end"></div>
</div>

调整后不管logo宽度怎么变化，中间的副标题和主标题都会保持居中对齐，不会出现偏移。

内容的提问来源于stack exchange，提问作者wertyu