如何将 2 个左对齐的网格项目居中？答案

【问题标题】：How can I center 2 grid Items that are left justified?如何将 2 个左对齐的网格项目居中？
【发布时间】：2022-11-26 10:40:08
【问题描述】：

我试图让这两个项目一起居中而不是向右浮动。它是自动加载团队成员的更大工具的一部分，如果连续有 2 或 4 个成员，我希望布局保持不变。这就是 grid-template-columns 设置为 4 的原因。

.members.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 69px;
  grid-row-gap: 40px;
  text-align: center;
  grid-auto-columns: 1fr;
  justify-content: center;
  justify-items: center;
  margin: auto;
  text-align: center;
}

.members .teamMember {
  text-align: center;
}

.teamMember a img,
.teamMember a .nophotoContainer {
  border: 7px solid white;
  transition: border 1s;
}

.nophotoContainer {
  border-radius: 50%;
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #032c41;
}

.nophotoContent {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

<div class="members grid">
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Kent H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
</div>

【问题讨论】：

如果你希望不同数量的项目始终居中，你应该使用 flexbox。
好的。我可以试一试，所以网格没有明确的方法吗？我总是想弄清楚该使用哪个。
@MichaelBenjamin。你的建议奏效了。如果您想添加为答案，我会确认。

标签： css css-grid

【解决方案1】：

网格在您的布局中可能不起作用，因为列轨道会阻止跨行自动居中。作为替代方案，您可以使用 flexbox 将项目居中：

.members.grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.teamMember a img,
.teamMember a .nophotoContainer {
  border: 7px solid white;
  transition: border 1s;
}

.nophotoContainer {
  border-radius: 50%;
  position: relative;
  height: 300px;
  width: 300px;
  background-color: #032c41;
}

.nophotoContent {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

<div class="members grid">
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Kent H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>

  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>

  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>

  <div class="teamMember">
    <a href="#">
      <div class="nophotoContainer has-background">
        <div class="nophotoContent">
          <h4>Bruce H</h4>
          <h6>Member Role</h6>
        </div>
      </div>
    </a>
  </div>
</div>

【讨论】：