ANGULAR - Как центрировать выравнивание подсказки или метки в div с радиогруппой - ANGULAR

Question

Как я могу выровнять по вертикали в центре одну подсказку или метку внутри одного div с помощью mat-radio-group?

Сегодня мой код имеет следующую последовательность:

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

И вот результат:

Я бы хотел выровнять подсказку по мату в том же ряду значений из группы мат-радио без css.

Answer 1

В контейнере попробуйте:

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

Answer 2

Решена проблема выравнивания с помощью следующего кода:

style="margin: auto;"

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

Answer 4

В файле компонента css добавьте следующий класс:

.centered {
   text-align: center;
}

и обновите код подсказки:

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