我怎样才能使 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>

我怎样才能使 div 标签内的按钮居中，使其响应 Angular 8 中的切换设备工具栏

How can i center a button inside of a div tag, to make it responsive for toggle device toolbar in Angular 8

css

angular-material

ng-bootstrap

angular