将图像与尾风和ReactJS对齐到中心

Question

使用Tailwind和ReactJS，我试图将一个图像对齐到中心，但我做不到，这是我的代码：

    <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>

下面是结果的截图：

​

​

Answer 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中

Answer 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。希望这能有所帮助

Answer 3

您需要向图像中添加m-auto。你可以请看这里

<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>