对齐中心 sidenav 材质 2答案

【问题标题】：Align center sidenav material 2对齐中心 sidenav 材质 2
【发布时间】：2017-01-05 17:45:25
【问题描述】：

我正在使用 Angular Material 2 并遇到一个问题：我可以将 sidenav 中的文本居中对齐，但按钮未对齐。

<md-sidenav-layout fullscreen>
  <md-sidenav #start mode="side">
    <md-sidenav-container align="center">
      <h3>Simple Todos</h3>
      <button md-raised-button (click)="start.close()">Close</button>
      <p>One more text here</p>
    </md-sidenav-container>
    </md-sidenav>
  <md-content>
    <md-toolbar color="primary">

      <button (click)="start.toggle()" md-icon-button [disableRipple]="true"><md-icon>menu</md-icon></button>

      <!-- This fills the remaining space of the current row -->
      <span class="example-fill-remaining-space"></span>
    </md-toolbar>

    <h3>Hello world</h3>

  </md-content>
</md-sidenav-layout>

【问题讨论】：

将 margin:0 auto 应用到您的按钮

标签： html css angular angular-material angular-material2

【解决方案1】：

只需在标题中创建一个与菜单一样大的 div 并使用此样式

.menu_container {
  width: 100px;
  height: 60px;
  background: gray;
  position: relative;
}
.menu {
  background: blue;
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="menu_container">
  <div class="menu centered"></div>
</div>

【讨论】：