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

Question

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

我目前的css是：

<section class=“英雄容器max-w-screen-lg mx-auto text-center pb-10”><div class=“”><img src=“/images/snapshot.png”alt=“截图”width=“887”height=“550”/></div></节>

当我检查镀铬的图像时，我可以看到图像右侧的一些区域不是图像的一部分，但正在占用空间。

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

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

另外，如果有人可以使用容器来解决这个问题，你能给我展示一种使用flex的替代方法吗？我还尝试了“flex items-center”，但这对我也不起作用。

Answer 1

这个mx-自动也应该转到图像，顺风使图像成为块元素：

<link href=“https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css“rel=”stylesheet“/><section class=“英雄集装箱max-w-screen-lg mx-auto pb-10”><img class=“mx auto”src=“https://picsum.photos/id/1/200/300“alt=”屏幕截图“></节>

使用flexbox应该调整中心

<link href=“https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css“rel=”stylesheet“/><section class=“英雄集装箱max-w-screen-lg mx-auto pb-10 flex justify-center”><img src=“https://picsum.photos/id/1/200/300“alt=”屏幕截图“></节>

或者mx-自动在图像上：

<link href=“https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css“rel=”stylesheet“/><section class=“英雄集装箱max-w-screen-lg mx-auto pb-10 flex”><img class=“mx-auto”src=“https://picsum.photos/id/1/200/300“alt=”屏幕截图“></节>