欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使這個div居中，我已經做了調整.對齊-項目:居中.容器div仍然沒有居中

CSS
錢衛國2年前8瀏覽0評論

容器不堆疊在主體的中心 HTML代碼:-

<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代碼:-

.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;
}

我試圖將容器div移動到中間，但是它沒有在中間堆疊

因為您希望容器在中間，所以您需要將該div包裝在另一個div中，并使其伸縮和對齊-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>

將margin屬性設置為auto可能有助于解決您的問題。

.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>