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

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使用媒体查询来在屏幕尺寸更改时更改它