代码之家 › 专栏 › 技术社区 › ahmed ahmedx

如何正确居中放置卡片

tailwind-css web reactjs css

ahmed ahmedx · 技术社区 · 1 年前

我使用Tailwind CSS在flex容器中对卡片进行样式设置。最初,我使用将卡片水平和垂直居中 items-center 和 justify-center 。然而,我遇到了一个问题,当只有几张牌时,它们之间会留出足够的空间。为了解决这个问题,我尝试使用 justify-start ,解决了间距问题,但导致卡片无法在容器内正确居中。

我当前的设置:

<main className="max-w-[1200px] mx-auto my-20 flex flex-wrap items-center justify-start gap-5">
  {series &&
    series.map(
      (serie) =>
        serie.backdrop_path &&
        serie.overview &&
        !("success" in serie) && (
          <div
            className="w-[170px] max-w-sm lg:w-[220px] rounded text-slate-200 p-2 flex-shrink-0"
            key={serie.id}
          >
            <DataCard dataType={serie} />
          </div>
        )
    )}
</main>

这是目前的结果:

我想要的是:

我想知道如何在确保卡片水平居中的同时,保持卡片与容器开头的对齐。如有任何关于如何实现这一点的建议或见解,我们将不胜感激。

1 回复 | 直到 1 年前

Tanishq S 1 年前

使用 flex-wrap 会帮你的

实例

<div class="flex flex-wrap w-full items-center justify-center gap-4">
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-yellow-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-red-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-green-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-yellow-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-red-100"></div>
  </div>
</div>

后果

这里我用过 柔性包装 在父对象中。你可以用同样的方法来解决你的问题。

Pinal Tilva 1 年前

你不能仅仅用柔性盒子来实现这一点,你必须给容器最大的宽度, here 你可以学到更多。顺便说一句,我建议您在这种情况下使用网格布局:

<main className="mx-auto my-20 grid w-fit grid-cols-2 gap-5 bg-red-400 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
  // content 
</main>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前