如何在Grid布局的div中居中文本并拉开两列间距？

我来帮你搞定这个布局调整！看了你的代码和目标效果，只需要几个小修改就能达到你想要的样子：

问题分析 #

你的代码里有几个小细节需要调整：

• 混用了class和className（React项目里要统一用className，普通HTML则用class）
• 多余的w/2（应该是w-1/2，但在grid布局下完全不需要手动设置宽度）
• 缺少两列之间的间距控制，导致内容紧挨分割线

修改后的代码 #

<div className="px-80 py-4 grid grid-cols-2 divide-x-4 gap-6">
  <div className="flex flex-col items-center justify-center py-2">
    <div className="font-bold text-6xl">+9.7%</div>
    <p className="text-gray-700 text-4xl">Since Last Quarter</p>
  </div>
  <div className="flex flex-col items-center justify-center py-2">
    <div className="font-bold text-6xl">-11.3%</div>
    <p className="text-gray-700 text-4xl">YTD</p>
  </div>
</div>

关键调整说明 #

1. 统一使用className：确保所有样式属性用同一个语法，避免样式不生效
2. 添加gap-6：在外层grid容器设置列间距，数值可以根据你的需求调整（比如gap-4更小，gap-8更大），这样两列内容就不会紧挨在一起
3. 优化子容器布局：用flex-col items-center justify-center让内部文本和元素完美居中，同时可以去掉子元素的text-center（父级的居中已经覆盖了这个效果）
4. 可选：添加py-2：给子容器添加上下内边距，让内容和容器上下边缘更协调

如果是普通HTML项目，只需要把所有className换成class就可以啦！

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