如何在引导程序中水平对齐厨房水槽卡？

Question

我正在尝试水平对齐厨房水槽卡片，这是卡片的图片。

( https://i.stack.imgur.com/4JIXc.png )

这些卡片 ⬆️ 没有像您看到的那样水平对齐 我希望它们水平对齐 我尝试了很多 CSS 和 HTML 代码，但都没有用。

这是我试过的一行代码：

CSS：浮动：左；清除：无；

Answer 1

您可以使用名为display: flex; 我默认的弹性方向是行已经启用。 所以你可以将这个属性用于你的卡片主根元素。

Answer 2

您可以使用：-

display: flex;
justify-content: center;

在父元素上，将项目水平居中。 justify-content 还有其他值，您可以根据需要使用它们进行对齐。

在引导程序中，您可以简单地使用类：-

d-flex justify-content-center

在父元素上，将项目水平居中。 同样还有其他类。 您可以查看引导文档。