我如何將 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

這不是角度問題，而是 html/css 問題。 如果您打算使用引導程序，您可能需要查看網格文檔以更好地熟悉它的工作原理以及實用程序類。 像這樣的東西可能更符合您的要求。

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