0

what i am trying to do is make the card thats inside the body element be centered right in the middle of it. but it just stays glued to the top. it is in the center. but it is also staying at the top of the viewport. im sorry im my question is dumb.

`

<body>
    <div class="card" style="width: 18rem">
      <img src="image-qr-code.png" class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">Improve your front-end skills by building projects</h5>
        <p class="card-text">
          Scan the Qr code to visit Frontend Mentor and take your coding skills to the next level
        </p>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>`

and my css: `

body{
    background-color:hsl(220, 15%, 55%);
    display:flex;
    align-items: center;
    justify-content: center;
}

.card{
    border-radius: 15px;
    display: flex;
}

.card-title{
text-align: center;
}

.card-text{
    text-align: center;
}`your text`

`

Gustavo Espejo
  • 1

0 Answers0