如何將圖像對齊到正確的列中。我已經使用了 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;}}}圖像
1 回答
溫溫醬
TA貢獻1752條經驗 獲得超4個贊
這是因為justify-content: space-around，當 flex 從一行換到一列時，它仍然使用，space-around但如果您想在中心水平對齊，那么您必須justify-content: center使用媒體查詢來在屏幕尺寸更改時更改它
- 1 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消