使用 Tailwind 和 ReactJS 将图像居中对齐答案

【问题标题】：Align image to center with Tailwind and ReactJS使用 Tailwind 和 ReactJS 将图像居中对齐
【发布时间】：2022-11-01 15:30:38
【问题描述】：

使用带有 ReactJS 的 Tailwind 我试图将图像与中心对齐，但我不能，这是我的代码：

    <div class="grid md:grid-cols-2 gap-1 place-content-center">
      <div className="hidden md:block my-10 md:ml-10 shadow rounded-sm">
        <img 
            src={ Logo }
            alt= "Logo"
            className="object-none object-center"
        />
      </div>
      <form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...

      </form>
    </div>

这是结果的屏幕截图：

【问题讨论】：

你能张贴你想要达到的结果的图片吗？

标签： css reactjs tailwind-css

【解决方案1】：

使div 父flex 而不是block，添加justify-center

像这样：

<div class="grid place-content-center gap-1 md:grid-cols-2">
  <div class="hidden md:inline-flex my-10 md:ml-10 shadow rounded-sm w-full  justify-center">
    <img src="https://picsum.photos/200" alt="Logo" class="object-none object-center" />
  </div>
  <form class="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>

看看https://play.tailwindcss.com/lQAKX22Qf7

或者您可以将mx-auto 添加到img

【讨论】：

【解决方案2】：

好的，所以我想您只想将图像与该网格项目的中心对齐，在这种情况下，您只需将 justify-self-center 类添加到包含图像的 div 中，如下所示：

 <div className="grid md:grid-cols-2 gap-1 place-content-center">
      <div className="hidden md:block my-10 md:ml-10 shadow rounded-sm justify-self-center">
        <img 
            src={ Logo }
            alt= "Logo"
            className="object-none object-center"
        />
      </div>
      <form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...

      </form>
    </div>

我还注意到外部div 有一个错字问题，应该是className 而不是class。希望这可以帮助

【讨论】：

【解决方案3】：

您需要将m-auto 添加到图像中。你可以see here

<div class="grid place-content-center gap-1 grid-cols-2">
  <div class="my-10 shadow rounded-sm w-full justify-center">
    <img src="https://picsum.photos/200" alt="Logo" class="object-none object-center m-auto" />
  </div>
  <form class="my-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>

【讨论】：