时间戳

首页 > 解决方案 > 尝试使用顺风容器使图像居中时遇到问题 - 图像右侧的不可见填充

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

问题描述

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

到目前为止，我的 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 中的图像时，我可以看到图像右侧的某些区域不是图像的一部分但正在占用空间。

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

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

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

在此处输入图像描述

标签： csstailwind-css

解决方案

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

推荐阅读