时间戳

首页 > 解决方案 > 在 CSS 网格中居中项目

html - 在 CSS 网格中居中项目

问题描述

https://codepen.io/joseph-van-den-avont/pen/QWvraWR

我使用 display:grid 制作了这个容器，但我似乎无法弄清楚如何将网格中的项目水平居中。我尝试过使用 justify-content:center 但它不适用于当前的编码方式，而且我没有足够的经验知道如何改变自己以使其工作。‎‎‎‎‎‎‎‎‎‎我是一个初学者，所以任何帮助将不胜感激；）

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: calc(2em + 2vh) calc(1.5em + 1vmin);
  grid-auto-flow: row dense;
}

.card__image {
  display: block;
  max-width: 60%;
  margin: auto;
}

.card {
  display: inline-block;
}


/* ==== Styles Related to the callout ==== */

.grid .card:nth-child(14) {
  grid-column: -1;
  grid-row: span 2;
  align-self: center;
}

@media (min-width: 712px) {
  .grid .card:nth-child(14) {
    grid-column: -1;
  }
}

.grid .card:nth-child(14) .card__image {
  margin: 0 auto;
  object-fit: cover;
}

@media (min-width: 712px) {
  .grid .card:nth-child(14) .card__image {
    height: 100%;
  }
}


/* ==== Additional Styles not related to grid layout ==== */

.container {
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(min-content, 1200px) minmax(1em, 1fr);
  grid-template-areas: "l-gutter heading r-gutter" "l-gutter content r-gutter";
  grid-row-gap: 1em;
}

.grid {
  grid-area: content;
  background-color: #b96517;
  margin: 200px 3% 2em 3%;
  list-style-type: none;
  border: double 10px white;
  padding: 2%;
}

.card__link {
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.card__link:hover {
  color: #2d2d2d;
}

.card__link:hover .card__image {
  transform: scale(1.04);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
}

.card__link:hover .card__text {
  transform: rotate(2deg) translate3d(3%, 1%, 0) scale(1.02);
}

.card__link:hover .card__price {
  transform: rotate(-2deg) translate3d(-3%, -1%, 0) scale(1.02);
}

.card__image {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  transition: transform 200ms ease-out, clip-path 200ms ease-out;
  background-color: white;
  border-radius: 50%;
  ;
}

.card__text {
  padding: 1em 0 0.5em;
  font-weight: 400;
  color: white;
  transition: transform 300ms ease-out;
}
<ul class="grid">

  <li class="card">
    <a class="card__link" href="#">
      <img class="card__image" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Red_Color.jpg" />
      <div class="card__text">red</div>
    </a>
  </li>

  <li class="card">
    <a class="card__link" href="#">
      <img class="card__image" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Red_Color.jpg" />
      <div class="card__text">red</div>
    </a>
  </li>

  <li class="card">
    <a class="card__link" href="#">
      <img class="card__image" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Red_Color.jpg" />
      <div class="card__text">red</div>
    </a>
  </li>
</ul>

标签： htmlcssgrid

解决方案

看这里链接

我使用了 display flex，而不是网格。

.grid {
      display: flex;
      justify-content:center;
      align-items:center;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-gap: calc(2em + 2vh) calc(1.5em + 1vmin);
      grid-auto-flow: row dense;
    }

推荐阅读