Question 416965 in Html Question posted in
Some basic documentation can be found here.

Html – Paragraph inside a flexbox is not getting centered

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-->
Tags:

3

Answers


  1. 0

    You need to use the text-align property to align text content
    You can use like this

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
  .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;
      text-align: center;
    }
  }
</style>

<body>
  <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-->
</body>

</html>
    Login or Signup to reply.
  2. 0

    The card section is already centered and the image and paragraph are both set in the center but your card width is small to the paragraph content so you see the paragraph is not centered If you see, just increase the card width so you can show the paragraph center

    Also, you don’t change the card width and need to center the paragraph text; just add text-align:center to the paragraph tag so the text is set to the center. Below is the code for your requirements.

    .spotifyplaylists {
    padding: 20px 29px;
}

.spotifyplaylists 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;
    border: 1px solid #cccccc;
}

.card img {
    width: 152px;
    aspect-ratio: 1 1;
    border-radius: 8px;
}

.card p {
    font-size: 12px;
    color: #808080;
    line-height: 16px;
    text-align: center;
}
    <div class="spotifyplaylists">
    <h1>Spotify Playlists</h1>
    <div class="card-container">
        <div class="card">
            <img src="https://picsum.photos/200/200" alt="image">
            <p>With Sachin-Jigar, Amit Trivedi, Mithoon</p>
        </div>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    Everything is fine. You need to add text-align: center; for .card. It will align everything inside it in centre.

    However, applying same class to p will also result in same. The content of the p will be centrally aligned.

    .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;
    text-align: center;
    margin: auto;
  }
}
    <div class="spotifyplaylists">
  <h1>Spotify Playlists</h1>
  <div class="card-container">
    <div class="card">
      <img src="https://placehold.co/100x100" alt="image">
      <p>With Sachin-Jigar, Amit Trivedi, Mithoon</p>
    </div>
  </div>
  <!--cardcont ends-->
</div>
<!--spotiplay ends-->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search