尝试使用顺风容器将图像居中时出现问题 - 图像右侧的不可见填充

Question

为什么我的屏幕截图图像不在屏幕中央？

我的 css 到目前为止是这样的：

  <section class="hero container max-w-screen-lg mx-auto text-center pb-10">
      <div class="">
        <img src="/images/screenshot.png" alt="screenshot" width="887" height="550" />
      </div>
  </section>

当我检查 chrome 中的图像时，我可以看到图像右侧有一些区域不属于图像但正在占用 space。

这是一张屏幕截图，您可以在其中看到图像右侧的不可见填充。

知道发生了什么，因为我想了解我什至无法将简单的图像居中。

作为奖励，如果有人可以使用容器来解决这个问题，你能告诉我另一种使用 flex 的方法吗？我也尝试了 'flex items-center'，但这对我也不起作用。

Answer 1

mx-auto也应该去图像，tailwind使图像成为块元素：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10">
    <img class="mx-auto" src="https://picsum.photos/id/1/200/300" alt="screenshot" >
</section>

对于 flexbox 应该是 justify-center

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10 flex justify-center">
    <img  src="https://picsum.photos/id/1/200/300" alt="screenshot" >
</section>

或图片上mx-auto：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />

<section class="hero container max-w-screen-lg mx-auto pb-10 flex">
    <img class="mx-auto" src="https://picsum.photos/id/1/200/300" alt="screenshot" >
</section>

尝试使用顺风容器将图像居中时出现问题 - 图像右侧的不可见填充

Having issues trying to center an image using tailwinds containers - invisible padding to the right of the image

css

tailwind-css