使Angular Material图标的中心居中[重复]

Posted 2023-03-13

【中文标题】使Angular Material图标的中心居中[重复]

【英文标题】：Center the center of an Angular Material icon [duplicate]

【发布时间】：2021-12-13 20:58:11

【问题描述】：

我正在尝试将 Angular Material 图标居中放置在一个矩形中：

如图所示，图标（或多或少）居中；然而，它实际上有点偏离中心。我认为（但诚然无法证明）正在发生的事情是图标的边缘居中（而不是图标的中心居中），这使图标看起来“偏离中心”。我希望能够使图标的中心居中，但到目前为止我发现的所有参考资料都是如何使整个图标居中（这是我已经在做的）。

我想做的一件事是计算代码中某处的绝对（或相对）位置，但如果我可以避免它，我强烈希望 not 这样做，因为这看起来像“脆弱" 和劳动密集型的方式。

我的模板如下：

<div
    class="rectangle"
    (click)="clicked(item)"
    [style.backgroundColor]="item.color"
    *ngIf="item.itemType == allEnumTypes.ClickButton"
    title=" item.warning "
  >
    <mat-icon
      *ngIf="item.icon"
      fontIcon=" item.icon "
      [style.color]="item.iconColor"
      class="large-icon"
      style="padding-top: 20%; padding-right: 30%"
    ></mat-icon><br /><br />
    <span class="select-button-text" [style.color]="item.fontColor" style="padding-bottom: 0%"> item.display </span>
  </div>

矩形类的 CSS 是：

.rectangle 
  width: 139px;
  height: 125px;
  border: 2px solid #bfc0c2;
  opacity: 1;
  text-align: center !important;
  background: #ffffff 0% 0% no-repeat padding-box;

有人可以在这里指出我的错误吗？

【参考方案1】：

我喜欢使用css-flex 居中

  .center
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  

如果你的矩形是

.rectangle 
    width: 139px;
    height: 125px;
    border: 2px solid #bfc0c2;
  

你可以的

<div class="center rectangle">
  <!--see that the margin-top is equal to the line-height-->
  <div class="center" style="margin-top:1.25rem">
    <mat-icon
      aria-hidden="false"
      style="font-size: 3rem;width:3rem;height:3rem"
      aria-label="Example home icon"
      >home</mat-icon
    >
    <div style="line-height: 1.25rem">Home</div>
  </div>
</div>

或者如果您想将组图标和标签居中

<div class="center rectangle">
    <mat-icon
      aria-hidden="false"
      style="font-size: 3rem;width:3rem;height:3rem"
      aria-label="Example home icon"
      >home</mat-icon
    >
    <div style="line-height: 1.25rem">Home</div>
</div>

见stackblitz

注意：要更改 mat-icon 的大小，您应该更改字体大小、宽度和高度