html - 如何将3列2行的表格从右居中对齐？

Question

所以我在网站的一部分工作，在那里我有一个 Meet-The-Team。 但是我的容器并不都是居中的。我总共有 6 个容器，其中我有一个图像和文本，它们都在容器中居中，但容器仍在左侧。我正在尝试将容器从左侧移动到中心。

我尝试了很多代码，比如 justify-content: center; self 对齐:居中； 以及所有其他可以将容器移动到中心的代码，但没有。

/* Three columns side by side */

.column {
  float: left;
  width: 22.2%;
  margin-bottom: 16px;
  padding: 0 8px;
  text-align: center;
  align-self: center;
}


/* Display the columns below each other instead of side by side on small 
    screens */

@media screen and (max-width: 650px) {
  .column {
    width: 50%;
    display: block;
    text-align: center;
    align-self: center;
  }
}


/* Add some shadows to create a card effect */

.card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  align-self: center;
  text-align: center;
  align-self: center;
}


/* Some left and right padding inside the container*/

.container {
  padding: 0 2px;
  justify-content: space-evenly;
  text-align: center;
  align-self: center;
}


/* Clear floats */

.container::after,
.row::after {
  content: "";
  clear: both;
  display: table;
  float: center;
  text-align: center;
  align-self: center;
}

结果是这样结束的

[ C1 ] [ C2 ] [ C3 ] 空白空间 |-| <- 滚动条

我希望它是这样的

空格 [ C1 ] [ C2 ] [ C3 ] 空格 |-| <- 滚动条

Answer 1

你的 css 有一些问题，看起来你尝试了很多，主要问题是你试图在它们都向左浮动时居中，我用 flexbox 改变了一些东西并删除了无用的部分的 css 以获得您想要的结果 + 响应部分。

/* Three columns side by side */
.column {
  width: 22.2%;
  margin-bottom: 16px;
  padding: 0 8px;
  align-self: center;
}


/* Display the columns below each other instead of side by side on small 
    screens */

@media screen and (max-width: 650px) {
  .container {
    flex-direction: column;
  }
}


/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}


/* Some left and right padding inside the container*/
.container {
  padding: 0 2px;
  display: flex;
  justify-content: center;
}

<div class="container">
  <div class="column">
    <div class="card">
        <p>AAA</p>
    </div>
  </div>
  <div class="column">
    <div class="card">
        <p>BBB</p>
    </div>
  </div>
  <div class="column">
    <div class="card">
        <p>CCC</p>
    </div>
  </div>
</div>