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

Html – How to center this div I have already done justify-content: center; align-items: center. Still the container div is not getting centered

The container is not stack at the center of the body
HTML code:-

<body>
  <div class="container">
    <div class="image">
      <img src="./images/image-qr-code.png" alt="qrcode">
    </div>
    <div class="heading">
      <h2>Improve your front-end skills by building projects</h2>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>
</body>

CSS code:-

.container{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    padding: 10px;
    border-radius: 18px;
    text-align: center;
}

I tried to move the container div to the center but it is not getting stack at the center

Tags:

2

Answers


  1. 0

    As you want the container in the center you need to wrap that div in the other div and make it flex and justify-content:center

    <style>
  .container {
    background-color: white;
    max-width: 400px;
    padding: 10px;
    border-radius: 18px;
    text-align: center;
  }
  .main-div{
    display: flex;
    justify-content: center;
  }
</style>

<body>
  <div class="main-div">
    <div class="container">
      <div class="image">
        <img src="./images/image-qr-code.png" alt="qrcode">
      </div>
      <div class="heading">
        <h2>Improve your front-end skills by building projects</h2>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </div>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    Setting the margin property to auto may help to resolve your issue.

    .container{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    padding: 10px;
    border-radius: 18px;
    text-align: center;
    margin:auto;
}
    <body>
  <div class="container">
    <div class="image">
      <img src="./images/image-qr-code.png" alt="qrcode">
    </div>
    <div class="heading">
      <h2>Improve your front-end skills by building projects</h2>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search