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：文本对齐：居中不能解决此问题。

Answer 1

如果您的目标是创建一个自适应的自动居中容器，使项目（图标）保持相同的宽度，而项目之间的间隙会不断变化，则目前最好的做法是flexbox（并且网格中的网格未来）。一个示例here。

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

通常，当您处理此类问题时，应考虑哪些元素需要适应。元素之间的间隙，元素本身还是元素所在的容器。

柔性间隙-固定元件-固定/柔性容器

可以通过我上面描述的方法进行管理-flexbox可以拉长间隙，在元素上固定宽度，还可以通过JavaScript对齐最后一行。

固定间隙-柔性元件-固定/柔性容器

固定了元素的填充和flex属性。

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

在元素上使用float: left并将其全部放入已定义尺寸的容器中。容器的宽度必须是元素宽度+填充宽度的倍数才能居中，这取决于每行上应有多少个元素。

固定间隙-固定元件-柔性容器

使用flex属性可以很好地做到这一点。通常，虽然需要设置最小宽度，但我们回到案例＃1。

因此，使用左对齐的项目实现完全响应的居中元素是当前的挑战。如果您不惜一切代价需要完美，我建议您使用多个media queries来确保它始终看起来像您想要的样子（例如，如here所述）。

Answer 2

我已经找到了解决方案，但是这并不是我想要的方式。除了网格本身，我已经摆脱了所有的ui-g网格布局。（我一直使用它的主要原因是要在所有浏览器上运行我的页面，即11导致新技术出现很多问题）我还使用了flex（建议使用flex-wrap）将元素保留在div中。这样，图标可以覆盖屏幕100％的宽度。为了容纳物品，我具有最大宽度，但这意味着容器的响应能力不再存在。这就是为什么我不喜欢这种解决方案的原因。为了解决这个问题，我使用了@media屏幕来调整显示元素的数量，具体取决于屏幕尺寸。要使其完美，它需要许多试验和错误，但一个修复程序就是一个修复程序。固定所有元素都可以通过“ 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像素，边距为10像素，因此我需要计算宽度的总和，并根据屏幕以及需要并排查看的图标数量来应用它。

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;
  }
}

最后一位是宽度配置。

将内容对齐的div居中

2 个答案:

柔性间隙-固定元件-固定/柔性容器

固定间隙-柔性元件-固定/柔性容器

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

固定间隙-固定元件-柔性容器