如何在NEXT.js+TailwindCSS中实现按钮文字垂直居中？

针对你用Next.js + Tailwind CSS开发时遇到的按钮文字垂直偏移问题，直接给你两个关键修复步骤：

• 给每个按钮添加flex justify-center items-center类，让按钮内部内容自动水平垂直居中
• 移除第一个按钮里多余的<p>标签，避免嵌套元素带来的额外间距影响

修改后的代码片段：

<main>
  <div class='flex justify-center items-center h-screen'>
    <div class='bg-zinc-700 h-[610px] w-[340px] rounded-2xl flex justify-center'>
      <ul>
        <li>
          <div class='bg-black h-[100px] w-[275px] rounded-2xl shadow-2xl translate-y-11'></div>
        </li>
        <li>
          <div class='flex justify-center items-center h-[50%] translate-y-32 flex-row'>
            <ul>
              <li>
                <ul class='flex flex-row w-full'>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full flex justify-center items-center'>c</button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full flex justify-center items-center'>÷</button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full flex justify-center items-center'>x</button></li>
                  <li class='text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full flex justify-center items-center'>+</button></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</main>

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

原理很直接：Tailwind的flex justify-center items-center会让容器内的内容在水平、垂直两个轴向上都居中，刚好解决你的垂直偏移问题；移除多余的<p>标签是因为行内元素默认的行高可能会导致文字位置偏移，直接把文字放在按钮里更简洁可靠。

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