如何在Tailwind CSS中实现文本的完美垂直对齐？

你当前代码里的父元素用了flex items-center flex-col，在垂直flex布局中，items-center会让所有子元素（h1）水平居中，所以文本看起来不是从左侧对齐。要实现所有文本从左侧（你说的黑色线条位置）开始对齐，有两种简单方法：

方法一：修改父元素的对齐方式 #

把父元素的items-center换成items-start，让子元素靠左排列：

<div class="w-60 bg-red-200 flex flex-col items-start">
  <h1>Loremipsm dolor.</h1>
  <h1>Lorem, hj dolor.</h1>
  <h1>Lom, ipolor.</h1>
  <h1>Lorem, ipsumolor.</h1>
</div>

方法二：让子元素占满宽度并左对齐文本 #

如果需要保持父元素的items-center，可以给每个h1添加w-full text-left类，让h1占满父元素宽度，同时文本左对齐：

<div class="w-60 bg-red-200 flex flex-col items-center">
  <h1 class="w-full text-left">Loremipsm dolor.</h1>
  <h1 class="w-full text-left">Lorem, hj dolor.</h1>
  <h1 class="w-full text-left">Lom, ipolor.</h1>
  <h1 class="w-full text-left">Lorem, ipsumolor.</h1>
</div>

两种方法都能让所有文本从左侧起始位置对齐，选哪种看你是否需要保留父元素的水平居中布局逻辑。

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