使用 CSS 将 HTML DIV 居中不起作用，我做错了什么？

Question

我目前正在做一项学校作业，但遇到了无法解决的问题。 我创建了两个带有网格系统的 div，一个用于日历，一个用于新闻部分，当我将其缩小到移动版本时，它不会居中。

谁能帮我解决这个问题吗？

我尝试过使用 margin: 0 auto 清除浮动；并调整内容：中心；等等，但我怀疑我在某个地方错过了一些不允许我移动 div 的东西。

这是图像网格/新闻网格，不会以移动版本为中心。

.wrapper {
  margin: 0 auto;
  height: auto;
  max-width: 1100px;
  padding: 2em;
  margin-top: 30px;
}

.column2 {
  float: right;
}

/* inställning för att ta bort understryken länk i kolumn 2 */
.column2 a {
  text-decoration: none;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* två kolumner */
  gap: 18px;
  /* mellanrum mellan bilderna */
}

/* design på image grid */
.image-grid img {
  width: 200px;
  height: 200px;
  border-radius: 3px;
  /* rundar av kanter på bilderna */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  /* skugga på bilderna */
  object-fit: cover;
  /* behåll aspekt ration */
}

.calendarbutton {
  background-color: #3f8c9c;
  width: 200px;
  height: 50px;
  border: none;
  font-family: "Alternate Gothic Cond ATF", Helvetica, sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
}

.calendarbuttondiv {
  display: flex;
  /* använd flexbox */
  justify-content: center;
  /* centrerar innehållet */
  clear: both;
  /* rensa float */
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* en rad */
  grid-row: 1;
  gap: 25px;
  /* mellanrum mellan bilderna */
}

.news-grid img {
  width: 350px;
  height: 245px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  /* behåll aspekt ration */
}

/* design på nyhetsknappen */
.newsbutton {
  background-color: #3f8c9c;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  /* centera knappen */
  border: none;
  font-family: "Alternate Gothic Cond ATF", Helvetica, sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
  margin-bottom: 150px;
}

.row1 {
  margin-top: 120px;
}

.row1 a {
  text-decoration: none;
}

<div class="column2">
  <h2>KALENDER</h2>
  <!-- kalenders bilder -->
  <div class="image-grid">
    <div><img src="images/kalender1.png" alt="Kalender bild 1"></div>
    <div><img src="images/kalender2.png" alt="Kalender bild 2"></div>
    <div><img src="images/kalender3.png" alt="Kalender bild 1"></div>
    <div><img src="images/kalender4.png" alt="Kalender bild 4"></div>
    <div><img src="images/kalender1.png" alt="Kalender bild 5"></div>
    <div><img src="images/kalender2.png" alt="Kalender bild 6"></div>
    <span class="emptyspace"></span>
  </div>
  <!-- kanpp för att se alla kalenders händelser  -->
  <div class="calendarbuttondiv"><a href="https://www.hv.se/kalender/" target="_blank" class="calendarbutton">Se
          hela kalendern</a></div>
</div>
<!-- container som innehåller nyhetsgrid -->
<div class="row1">
  <h2>NYHETER</h2>
  <!-- bilder och länkar till kalender -->
  <div class="news-grid">
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/kroenika-en-satsning-med-bara-vinnare-477416" target="_blank"><img src="images/nyheter1.png" alt="Kalender bild 1"></a>
    </div>
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/industrin-maaste-se-bortom-den-digitala-tekniken-477049" target="_blank"><img src="images/nyheter2.png" alt="Kalender bild 2"></a>
    </div>
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/nya-former-foer-samverkan-mellan-hoegskolan-vaest-och-kommuner-477152" target="_blank"><img src="images/nyheter3.png" alt="Kalender bild 1"></a>
    </div>
    <span class="emptyspace"></span>
    <!-- knapp för att se alla nyheter på hv.se -->
    <a href="https://www.mynewsdesk.com/se/hogskolanvast" target="_blank" class="newsbutton">Se flera nyheter</a>
  </div>
</div>
</div>

Answer 1

您只需要使用媒体查询来确保显示响应。像这样的东西：

/* Other styles remain the same */

/* Mobile styles */
@media (max-width: 767px) {
  .column2, .row1 {
    float: none;
    width: auto;
  }

  .image-grid, .news-grid {
    grid-template-columns: 1fr; /* Stacks images in one column */
    justify-items: center; /* Centers grid items within the grid */
    gap: 18px; /* Adjust the gap as needed */
  }

  /* Adjust image width to be less than or equal to the grid width */
  .image-grid img, .news-grid img {
    width: 100%;
    height: auto; /* Maintain the aspect ratio */
    max-width: 200px; /* Or the max width you prefer */
  }

  .calendarbuttondiv, .calendarbutton, .newsbutton {
    width: 100%; /* Full width of the parent */
    justify-content: center; /* Center button with flexbox */
  }

  .newsbutton {
    margin-bottom: 50px; /* Adjust the bottom margin if needed */
  }
}

Answer 2

CSS 有

@media

来处理不同的屏幕尺寸，您可以定义屏幕的最大宽度并为该屏幕添加样式。

以下内容仅适用于移动屏幕：

@media (max-width: 480px) {
  .image-grid, .news-grid {
    grid-template-columns: 1fr; 
  }

  .image-grid img, .news-grid img {
    width: 100%;
    height: auto;
  }

  .wrapper, .row1 {
    padding: 1em; 
    margin: 0 auto; 
  }

  /* Add additional styles */
}