Angular如何在div中居中mat-icon答案

【问题标题】：Angular how to center mat-icon inside a divAngular如何在div中居中mat-icon
【发布时间】：2022-01-14 21:29:42
【问题描述】：

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

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

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

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

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

【问题讨论】：

如果您从任何链接分享可重现的示例，那么我可以为您提供更好的帮助
我现在要创建一个stackBlitz
stackblitz.com/edit/… 。它在工作吗？主要是代码。我知道为什么不使用 MatIconModule。并且基本上该函数可以返回 false （在那个例子中，我推杆总是返回 true）。我想要的是当机器人图标存在时 - >在它们之间有一些空间。当只存在一个图标时，我希望该图标位于 div 的中心。
我无法在依赖项中安装@angular/material/icon
为什么不使用justify-content:center和.icons mat-icon+mat-icon{margin-left:1rem}？

标签： html css flexbox

【解决方案1】：

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

.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>

更多关于flexhere。

【讨论】：

不，它不起作用。当我只有一个图标时，它不会居中。它仍然在两个图标时的地方。当它只是一个图标时，我希望该图标位于 div 的中心