如何在引導程序中水平對齊廚房水槽卡？

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

在父元素上，將項目水平居中。 同樣還有其他類。 您可以查看引導文檔。