ANGULAR - 如何将 div 中的 mat-hint 或标签与 radio-group 居中对齐 - ANGULAR答案

【问题标题】：ANGULAR - How to center align mat-hint or label in div with radio-group - ANGULARANGULAR - 如何将 div 中的 mat-hint 或标签与 radio-group 居中对齐 - ANGULAR
【发布时间】：2020-12-29 13:22:55
【问题描述】：

如何使用 mat-radio-group 在中心垂直对齐一个 mat-hint 或一个 div 内的标签？

今天，我的代码有这个顺序：

  <div fxLayout="row" fxLayoutAlign="center center">
      <div fxLayout="column" fxFlex="100%">
        <div fxLayout="row">
          <div fxLayout="column" fxFlex="30%">
            <mat-hint>{{ 'É bivolt?' | translate: moduleName }}</mat-hint>
          </div>
          <div fxLayout="column" fxFlex="70%">
            <mat-radio-group id="rgpStaAparelhoBivoltNewUcServicoRessarcDanoEquipEletr"
              [(ngModel)]="newUcServicoRessarcDanoEquipEletr.staAparelhoBivolt" [disabled]="staViewing">
              <mat-radio-button value="S">{{ 'Sim' | translate: moduleName }}</mat-radio-button>
              <mat-radio-button value="N">{{ 'Não' | translate: moduleName }}</mat-radio-button>
              <mat-radio-button value="D">{{ 'Não sei' | translate: moduleName }}</mat-radio-button>
            </mat-radio-group>
          </div>
        </div>
      </div>
    </div>

结果如下：

我想将 mat-hint 与 mat-radio-group 中的值的同一行对齐，而不使用 css。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

用下面的代码解决了对齐问题：

style="margin: auto;"

【讨论】：

【解决方案2】：

在组件css文件中添加如下类：

.centered {
   text-align: center;
}

并更新 mat-hint 代码：

<mat-hint class="centered">{{ 'É bivolt?' | translate: moduleName }}</mat-hint>

【讨论】：

元素内联css也不是一个选项？
提议的 css 不起作用。我们在系统中使用通用类 css，所以 css 不是最好的选择
用 style="margin: auto" 解决。感谢您的帮助。

【解决方案3】：

试试这个只需添加一个类justifyline

HTML

<div class="example-container">
 <div fxLayout="row" fxLayoutAlign="center center">
      <div fxLayout="column" fxFlex="100%">
        <div fxLayout="row" class="justifyline">
          <div fxLayout="column" fxFlex="30%">
            <mat-hint>1</mat-hint>
          </div>
          <div fxLayout="column" fxFlex="70%">
            <mat-radio-group id="rgpStaAparelhoBivoltNewUcServicoRessarcDanoEquipEletr"
              [(ngModel)]="newUcServicoRessarcDanoEquipEletr.staAparelhoBivolt" [disabled]="staViewing">
              <mat-radio-button value="S">1</mat-radio-button>
              <mat-radio-button value="N">2</mat-radio-button>
              <mat-radio-button value="D">3</mat-radio-button>
            </mat-radio-group>
          </div>
        </div>
      </div>
    </div>
</div>

css

.justifyline mat-hint{float:left;}

【讨论】：

适用于特定的类，但在这个项目中，我们使用的是通用 css 类，而父类正在杀死下面的类。感谢您的帮助。

【解决方案4】：

在容器中尝试：

style = "margin-right:auto; margin-left:auto;

【讨论】：

用 style="margin: auto" 解决。感谢您的帮助。
很好，很高兴你解决了它。有时它只适用于左右边距，有时像你一样适用于所有它们，它在很大程度上取决于父标签，有时需要margin: 0 auto。

【解决方案5】：

在 HTML 中：

<mat-form-field class="center-label">
...
</mat-form-field>

在 CSS 中：

mat-form-field.center-label label {
    text-align: center;
}

我不确定标签内是否也放置了提示，但我对此表示怀疑。

如果您尝试使用提示执行此操作，请检查 mat-form-field 并找到提示文本所在的元素。然后您只需要在 css 中指定该元素（您可能需要包括一些常量类名，Angular 在 css 选择器中添加，可能会根据 Angular 版本而改变。

【讨论】：