对准中心sidenav材料2

Question

我正在使用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>

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