Выровнять материал боковой панели 2 по центру

Я использую Angular Material 2 и сталкиваюсь с проблемой: я могу выровнять текст в боковом меню по центру, но кнопка не выровнена. введите описание изображения здесь

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

angular html css angular-material angular-material2
person Le Dinh Nhat Khanh    schedule 29.08.2016    source источник
comment
применить маржу: 0 автоматически к вашей кнопке   -  person Sammy    schedule 29.08.2016

Ответы (1)


arrow_upward
2
arrow_downward

Просто сделайте в заголовке 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>

person Rudi Urbanek    schedule 29.08.2016