在移动版本上使用网格布置项目的中心 div

我有以下代码:

function seeMore() {
  window.location("https://inderatech.com/index.html")
}
.see-more {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  overflow: hidden;
  /* Subtle inner border */
  box-shadow: inset 0 0 1px 1px rgba(0,0.015);
}

.avatar img {
  height: 70%;
  width: 70%;
  z-index: 2;
  /* Optionally add a drop shadow to the main image  */
  /* to make it feel "lifted"    */
  filter: drop-shadow(0 1px 4px rgba(0,0.12));
}

.avatar .background {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2);
  filter: blur(13px) opacity(0.2);
}


/* Irrelevant styling */

.Mycontainer {
  /* width: 200px; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  place-items: center;
  width: 50%;
  margin: 0 auto;
}
<div class="container">
  <div class="section-title text-center">
    <h2>Recent Clients</h2>
  </div>
</div>

<div class="Mycontainer">

  <a href="https://www.6ixangels.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
      <img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
    <img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
  </div>

  <a href="https://www.marcosbackyardswimming.ca" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./mss-transparent.png" class="background" />
      <img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
    <img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
    <img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
    <img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
  </div>

  <a href="https://app.cleaningassistant.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
      <img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://www.beaniesforbaxter.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
      <img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://6ixhottub.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
      <img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
    </div>
  </a>

</div>

<br>
<br>
<div class="see-more">
  <a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>

在桌面版本上,它看起来不错,但是如果它在较窄的屏幕上呈现,那么您会看到它没有正确地在页面上水平居中。我应该在 CSS 中更改哪些内容以将 div 置于页面中央?

kobehu2000 回答:在移动版本上使用网格布置项目的中心 div

使用 flexbox 可以让您自动包装项目。 (请参阅“无关样式”评论下的 CSS。)

使用 grid 似乎是个好主意,因为它是“现代的”,但是当您想要创建具有多种项目类型的布局时,使用网格通常是有意义的。当您想在不设置固定列数的情况下自动将某些内容布置到列或行中时,弹性框通常很有用。

.see-more {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  overflow: hidden;
  /* Subtle inner border */
  box-shadow: inset 0 0 1px 1px rgba(0,0.015);
}

.avatar img {
  height: 70%;
  width: 70%;
  z-index: 2;
  /* Optionally add a drop shadow to the main image  */
  /* to make it feel "lifted"    */
  filter: drop-shadow(0 1px 4px rgba(0,0.12));
}

.avatar .background {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2);
  filter: blur(13px) opacity(0.2);
}


/* Irrelevant styling */

.Mycontainer {
  /* width: 200px; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
}
<div class="container">
  <div class="section-title text-center">
    <h2>Recent Clients</h2>
  </div>
</div>

<div class="Mycontainer">

  <a href="https://www.6ixangels.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
      <img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
    <img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
  </div>

  <a href="https://www.marcosbackyardswimming.ca" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./mss-transparent.png" class="background" />
      <img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
    <img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
    <img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
    <img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
  </div>

  <a href="https://app.cleaningassistant.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
      <img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://www.beaniesforbaxter.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
      <img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://6ixhottub.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
      <img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
    </div>
  </a>

</div>

<br>
<br>
<div class="see-more">
  <a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>
<script>
  function seeMore() {
    window.location("https://inderatech.com/index.html")
  }
</script>

本文链接:https://www.f2er.com/39084.html

大家都在问