如何將圖像對(duì)齊到正確的列中。我已經(jīng)使用了 Flex 屬性，但如果我添加 6 張卡，則缺少對(duì)齊。請(qǐng)幫我。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;}}}圖像
1 回答
溫溫醬
TA貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個(gè)贊
這是因?yàn)?code>justify-content: space-around，當(dāng) flex 從一行換到一列時(shí)，它仍然使用，space-around但如果您想在中心水平對(duì)齊，那么您必須justify-content: center使用媒體查詢(xún)來(lái)在屏幕尺寸更改時(shí)更改它
- 1 回答
- 0 關(guān)注
- 145 瀏覽
添加回答
舉報(bào)
0/150
提交
取消