Angular 如何在 div 中居中 mat-icon

Question

我在一个 div 中有两个垫子图标。 这些图标基于值可见。 有三种情况：无显示，一种显示，两种都显示。 我的问题是当只有一个时，我希望它位于 div 的中心，但是当两个图标都存在时，我希望它们之间有一些空间。 我试图给那个 div justify-content: space-evenly，但是当只有一个图标时它不起作用（图标不在 div 的中心）。 我该怎么做？

HTML：

<div class="icons">
          <mat-icon id="warningIcon" [style.visibility]="checkWarningAlerts(element.alerts) ? 'visible' : 'hidden'" >warning</mat-icon>
          <mat-icon id="errorIcon" [style.visibility]="checkErrorAlerts(element.status) ? 'visible' : 'hidden'">error</mat-icon>
        </div>

CSS：

.icons {
  display: flex;
  justify-content: space-evenly;
}

#warningIcon {
  color: #ffa000;
  font-size: 30px;
}

#errorIcon {
  color: #c62828;
  font-size: 30px;
}

Answer 1

这是因为每个项目都伴随着长度不同的文本，导致间距不平衡。 您可以定位这两个图标并给它们一个flex: 1; 或flex-grow: 1; 使它们占据相同的空间，使它们均匀。 检查下面的代码段供您参考：

 .icons { display: flex; justify-content: space-evenly; }.icon { flex: 1; text-align: center; } #warningIcon { color: #ffa000; font-size: 30px; } #errorIcon { color: #c62828; font-size: 30px; }

 <div class="icons"> <mat-icon id="warningIcon" class="icon" [style.visibility]="checkWarningAlerts(element.alerts)? 'visible': 'hidden'">warning</mat-icon> <mat-icon id="errorIcon" class="icon" [style.visibility]="checkErrorAlerts(element.status)? 'visible': 'hidden'">error</mat-icon> </div>

更多关于flex 的信息。