为什么图像卡无法正确对齐

Question

如何将图像对齐到正确的列中。我已经使用了 Flex 属性，但如果我添加 6 张卡，则缺少对齐。请帮我。HTML 代码：<div className="contentCard"><div className="card"><div className="cardimage"><img className="img" src="../../static/download.jpg" alt="Logo" /></div><div className="cardtext">Entertainment<div className="cardSectext">collect post-event feedback from concerts,trade show</div></div></div></div>这是 CSS 代码：.contentCard{display:flex;width: 100%;height: auto;flex-direction:row;flex-wrap:wrap;margin-right:40px;justify-content:space-around;.card{width:18.50%;height: 190px;margin:20px;border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 15px 15px 15px 15px;.cardimage{width:100%;height:65%;object-fit: cover;}.img{height: 100%;width: 100%;}.cardtext{margin-left: 10px;font-family:Avenir-Roman; }.cardSectext{height: 10%;font-size:14px;color:grey;}}}图像

Answer 1

这是因为justify-content: space-around，当 flex 从一行换到一列时，它仍然使用，space-around但如果您想在中心水平对齐，那么您必须justify-content: center使用媒体查询来在屏幕尺寸更改时更改它