Как я могу центрировать кнопку внутри тега div, чтобы она реагировала на переключение панели инструментов устройства в Angular 8

Question

У меня есть следующая проблема: У меня есть <div>, и внутри этого тега у меня есть кнопка, но я не могу центрировать кнопку вертикально и горизонтально внутри <div> также я хочу, чтобы кнопка была центральной для телефонов, для которых я видел ее toggle device toolbar

Действительно не знаю, как ее решить, я новичок, используя Angular

• Ниже я приведу код моего <div> с кнопкой внутри, изображение того, как отображается кнопка , также я использую Angular material

Код тега Div

<div *ngIf="nav_bar==false" class="colour large">
  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item [routerLink]="'/'">
      <mat-icon>dialpad</mat-icon>
      <span>Inicio</span>
    </button>
    <button mat-menu-item [routerLink]="['/nosotros']">
      <mat-icon>voicemail</mat-icon>
      <span>Nosotros</span>
    </button>
    <button mat-menu-item [routerLink]="['/contacto']">
      <mat-icon>notifications_off</mat-icon>
      <span>Contacto</span>
    </button>
  </mat-menu>
<button class="mat-button col-xs-3" (click)="nav_bar=!nav_bar">
   <img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>

Answer 1

Это не вещь angular, это вещь HTML / css. Если вы собираетесь использовать bootstrap, возможно, вы захотите немного ознакомиться с документацией по сетке, чтобы лучше ознакомиться с ее работой, а также с классами утилит. Что-то вроде этого, вероятно, будет больше, чем вы ищете.

<div *ngIf="nav_bar==false" class="colour large d-flex align-items-center">
  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item [routerLink]="'/'">
      <mat-icon>dialpad</mat-icon>
      <span>Inicio</span>
    </button>
    <button mat-menu-item [routerLink]="['/nosotros']">
      <mat-icon>voicemail</mat-icon>
      <span>Nosotros</span>
    </button>
    <button mat-menu-item [routerLink]="['/contacto']">
      <mat-icon>notifications_off</mat-icon>
      <span>Contacto</span>
    </button>
  </mat-menu>
  <button class="mat-button mx-auto" (click)="nav_bar=!nav_bar">
     <img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
  </button>
</div>