使用Tailwind CSS时两行文本按钮对齐异常问题排查与修复

基于Tailwind CSS编写的代码运行后，第二个包含两行文本的按钮未与其余按钮对齐，显示效果异常。

原代码：

<div class="w-full">
  <div class="justify-stretch">
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">
      MyLabel
      <br />
      Second Line
    </button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500">MyLabel</button>
  </div>
</div>

问题原因 #

• 父容器未启用Flex布局：justify-stretch是Flex布局专用属性，父元素未添加flex类时，该属性无效，子按钮默认以块级元素排列，无法实现横向对齐。
• 按钮内文本垂直对齐未控制：多行文本的按钮没有设置内部文本的垂直居中方式，导致文本撑开按钮内部布局，视觉上出现偏移。

修复方案 #

给父容器添加flex类启用Flex布局，同时给所有按钮添加flex items-center justify-center类，确保文本无论单行还是多行都能居中对齐，消除布局偏移。

修复后的代码：

<div class="w-full">
  <div class="flex justify-stretch">
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">
      MyLabel
      <br />
      Second Line
    </button>
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">MyLabel</button>
    <button class="m-2 h-12 w-2/12 border border-gray-500 flex items-center justify-center">MyLabel</button>
  </div>
</div>

修复说明 #

1. 父容器添加flex类：让所有按钮在同一行横向排列，justify-stretch属性生效，确保按钮在容器内均匀分布。
2. 按钮添加flex items-center justify-center：将按钮自身设为Flex容器，内部文本垂直水平居中，无论文本行数多少，都不会影响按钮的整体对齐效果。

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