使用tailwindcss垂直将网格中的div中心

发布于 2025-01-30 12:19:02 字数 729 浏览 4 评论 0原文

我试图将div列为中心的CSS网格水平和垂直。我正在使用parwindcss v3。使用mx-auto，我可以水平对齐内容，但是Align-Middle以及Flexbox并未显示任何结果。我正在附加下面的代码段。

<div className="grid grid-cols-6 mb-2">
  <div className="col-span-1">
    <div className="flex align-middle">
      <ImLocation className="text-lg text-black mx-auto" />
    </div>
  </div>

  <div className="col-span-5">
    <p className="text-sm md:text-base text-black">
      Address Line 1, <br />
      Address Line 2, <br />
      Address Line 3
    </p>
  </div>
</div>

这里的问题是，第一个内div（带有类col-span-1）的高度小于另一个div。我希望该div在中心与对方垂直对齐。 iMlocation是我使用过的反应图标。

原文

I am trying to centre a div present inside a CSS Grid horizontally and vertically. I am using TailwindCSS v3. Using mx-auto, I can align the content horizontally, but align-middle along with flexbox isn't showing any results. I am attaching the code snippet below.

<div className="grid grid-cols-6 mb-2">
  <div className="col-span-1">
    <div className="flex align-middle">
      <ImLocation className="text-lg text-black mx-auto" />
    </div>
  </div>

  <div className="col-span-5">
    <p className="text-sm md:text-base text-black">
      Address Line 1, <br />
      Address Line 2, <br />
      Address Line 3
    </p>
  </div>
</div>

The issue here is that the first inner-div (with class col-span-1) has a smaller height than the other div. I want that div to align in the centre with the other div vertically. ImLocation is a react icon that I have used.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌︼了一个春 2025-02-06 12:19:02

使用items-center和josify-center如下：

<div className="grid grid-cols-6 mb-2">
    <div className="col-span-1">
        <div className="flex flex-row items-center justify-center">
            <ImLocation className="text-lg text-black mx-auto" />
        </div>
    </div>

    <div className="col-span-5">
        <p className="text-sm md:text-base text-black">
            Address Line 1, <br />
            Address Line 2, <br />
            Address Line 3
        </p>
    </div>
</div>

Use items-center and justify-center like below:

<div className="grid grid-cols-6 mb-2">
    <div className="col-span-1">
        <div className="flex flex-row items-center justify-center">
            <ImLocation className="text-lg text-black mx-auto" />
        </div>
    </div>

    <div className="col-span-5">
        <p className="text-sm md:text-base text-black">
            Address Line 1, <br />
            Address Line 2, <br />
            Address Line 3
        </p>
    </div>
</div>

回复收藏 0 原文

~没有更多了~