I have made a card container which contains an image and a paragraph.
I gave the card container display flex and align-items and justify-content both centre. The image got centered as expected but the paragraph is not getting centred.
I have a utility CSS where I have given the display: flex and flex- direction: column properties.
Here is the code.
.spotifyplaylists { padding: 20px 29px; h1 { font-size: 24px; }}.card { width: 186.73px; height: 237.14px; padding-top: 36px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; img { width: 152px; aspect-ratio: 1 1; border-radius: 8px; } p { font-size: 12px; color: var(--grey); line-height: 16px; }}<div class="spotifyplaylists"><h1>Spotify Playlists</h1><div class="card-container"><div class="card"><img src="./asset 19.jpeg" alt="image"><p>With Sachin-Jigar, Amit Trivedi, Mithoon</p></div></div><!--cardcont ends--></div><!--spotiplay ends-->