CSS에서 RTl 사용하지만 콘텐츠가 페이지 중간에 있습니다.

질문

각도 관리 패널을 작성 중이지만 문제가 있습니다. mu css에서 RTL을 사용 했으므로 RTL 패널이되었는데 이제 콘텐츠가 페이지 중간에 있습니다. 어떻게해야합니까?

이것은 내 HTML 코드입니다

<app-header ></app-header>


<mat-drawer-container>
    <mat-drawer mode="side" [opened]="sideBarOpen" >
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

<app-footer></app-footer>

이것은 내 CSS입니다

:host{
    display: flex;
    flex-direction: column;
    height: 100%;
}

mat-drawer{
    width :250px;
}

mat-drawer-container{

height:100% ;
direction: rtl;
position: rtl;
padding: 1em 1em .5em 2em;

}

mat-drawer-content{
direction: ltr;
text-align: ltr;


}

답변1

매트 서랍에 position = "end" 추가

<mat-drawer mode="side" [opened]="sideBarOpen" position="end">
    <app-sidebar></app-sidebar>
</mat-drawer>

 

 

 

 

출처 : https://stackoverflow.com/questions/62014326/using-rtl-in-css-but-the-content-is-in-the-middle-of-the-page