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;
}}}

Image

Answer 1

这是由于justify-content: space-around所致，当flex从一行到另一行缠绕时，它仍然使用space-around，但是如果要水平居中对齐，则必须使用justify-content: center来使用介质查询以更改屏幕尺寸时的更改

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

1 个答案: