センターサイデナブ素材2を整列する

Question

角度素材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> 

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>