ANGULAR - How to center align mat-hint or label in div with radio-group - ANGULAR

Question

How can i align vertically in the center one mat-hint or label inside one div with mat-radio-group?

Today, my code has this sequency:

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

And this is the result:

I'ld like to align the mat-hint in the same row of the values from the mat-radio-group without css.

Answer 1

In the component css file add the following class:

.centered {
   text-align: center;
}

and update mat-hint code:

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

Answer 2

Try this just add a class 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 3

In the container try:

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

Answer 4

Solved the align problem with the following code:

style="margin: auto;"

Answer 5

In HTML:

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

In CSS:

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

I'm not sure if hints are placed inside a label as well but I doubt it.

If you're trying to do it with the hint, then inspect the mat-form-field and find which element your hint text is located in. Then you just need to specify that element in your css (you may need to include some constant class name that angular adds in the css selector which may change depending on the angular version).