将内容左对齐的 div 居中

Question

我正在尝试建立一个我也使用 Angular 的网站。我需要将包含一些图标（大约 80 个）的 div 元素完美居中，并且这些图标必须左对齐。内容是通过文本输入过滤的，这种过滤每次都会产生不同数量的图标。我已经尝试过类似于引导程序的网格、flexbox 等的网格系统。当我将内容向左对齐时，右侧的一小块额外区域留空，或者所有元素都居中，底部元素居中，div 看起来没有条理。此外，我需要在每个图标之间保留至少 10 px 的边距。谁能帮我？

.notfound {
  text-align: center;
}

.iconelement:hover {
  background-color: #ffffff;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
  color: #000000;
}

.iconelement:active {
  background-color: #2974d4;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
  color: #ffffff;
}

.grid-container {
  background-color: #fdfdfd;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  text-align: left;
  flex-wrap: wrap;
}

.iconelement {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background-color: #fdfdfd;
  text-align: center;
  margin: 10px;
  float: none;
  color: #000000;
}

.icons {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="ui-g ">
  <div class="ui-g-12" *ngIf="(icons|filter:searchText).length===0">
    <div class=" ui-g-12 notfound">
      <h3>No results for "{{searchText}}"</h3>
    </div>
  </div>
</div>
<div class="ui-xl-3 ui-lg-3 ui-md-2 ui-sm-1" (click)="unselectIcon()"></div>
<div class=" ui-xl-6 ui-lg-6 ui-md-8 ui-sm-10 ">
  <div class="ui-g-12  grid-container">
    <div class="ui-g-1 iconelement" *ngFor="let icon of icons| filter : searchText; let i = index " (click)="getIcon(icon.id)">
      <i class="icons {{icon.name}}"></i>
    </div>
  </div>
</div>
<div class="ui-xl-3 ui-lg-3 ui-md-2 ui-sm-1" (click)="unselectIcon()"></div>
</div>

ps: text align: center 不能解决这个问题。

Answer 1

如果您的目标是创建一个响应式自动居中容器，其中项目（图标）保持相同的宽度而项目之间的间隙适应，那么目前最好的方法可能是flexbox（以及未来的网格） .一个例子here。

不过，基于 flexbox 的布局的问题是如何让最后一行左对齐。您可以尝试this thread 中提出的一些解决方案，但它们仅在某些情况下有效。通常，您需要使用 javascript 来实现这一点。我为此创建了一个函数，如果您有兴趣，可以将其发布到某个地方。

一般来说，当您处理此类问题时，您应该考虑需要调整哪些元素。无论是元素之间的间隙、元素本身还是元素所在的容器。

---

弹性间隙 - 固定元素 - 固定/弹性容器

可以通过我上面描述的方法进行管理 - 弹性框来拉伸间隙，固定元素的宽度，可能还有 javascript 来对齐最后一行。

固定间隙 - 灵活元素 - 固定/灵活容器

修复了元素的填充和flex 属性。

固定间隙 - 固定元素 - 固定容器

在元素上使用float: left 并将所有元素放入定义尺寸的容器中。容器的宽度必须是元素宽度 + 内边距的倍数才能居中，受每行应包含多少元素的影响。

固定间隙 - 固定元素 - 灵活容器

再次使用flex 属性是相当可行的。通常虽然需要设置最小宽度，但我们又回到了案例 #1。

因此，使用左对齐项目实现完全响应的居中元素目前是一个挑战。如果您不惜一切代价追求完美，我建议您使用多个media queries，以确保它始终如您所愿（例如here 所讨论的）。

Answer 2

我找到了我的解决方案，但它不是我想要的方式。除了网格本身，我已经摆脱了所有 ui-g 网格布局。 （我一直使用它的主要原因是在所有浏览器上运行我的页面，ie11 会导致许多新技术问题）我还使用 flex（推荐使用 flex-wrap）将元素保留在 div 中。 这样图标就覆盖了 100% 的屏幕宽度。 为了包含项目，我有一个最大宽度，但这意味着容器的响应能力不再存在。这就是为什么我不喜欢这个解决方案。为了解决这个问题，我使用@media screen 来根据屏幕大小调整显示的元素数量。 为了使其完美，它需要许多试验和错误，但修复就是修复。 修复所有元素由“margin: auto;”完成 这是修复后的代码：

<div class="ui-g">
<div class="notfound" *ngIf="(icons|filter:searchText).length===0">
    <h3>No results for "{{searchText}}"</h3>
</div>
  <div class="ui-g-12 grid-container">
    <div class="ui-g-1 iconelement" *ngFor="let icon of icons| filter : searchText; let i = index "(click)="getIcon(icon.id)">
      <i class="icons pi pi-{{icon.name}}" ></i>
    </div>
  </div>

在顶部的 div 中，我仍然使用 class=ui-g" 下推显示图标详细信息的粘性元素。 每个图标的宽度和高度均为 60 px，边距为 10 px，因此我需要计算宽度的总和，并根据屏幕和需要并排查看的图标数量来应用它。

CSS：

.notfound {
  text-align: center;
  margin: auto;
  width: 100%;
}

.iconelement:hover {
  background-color: #ffffff;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
  color: #000000;
}

.iconelement:active {
  background-color: #2974d4;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
  color: #ffffff;
}

.grid-container {
  background-color: #fdfdfd;
  padding-bottom: 20px;
  display:flex;
  flex-wrap: wrap;
  max-width: 660px;
  margin: auto;
}
.iconelement {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background-color: #fdfdfd;
  text-align: center;
  margin: 10px;
  float: none;
  color: #000000;
}

.icons {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
}

@media screen and (max-width: 430px) {
  .grid-container{
    max-width: 260px;
  }
}

最后一位是宽度配置。