센터 나는 현재 보이는 구성 요소가

Question

플렉스 레이아웃 사업부를 정렬과 같은 :

:

난 후 나는 모습은 이것이다 :이 생산

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'home-about', 
    template: ` 
    <div 
     fxFlex="50" 
     fxLayout="column" 
     fxLayoutAlign="center" 
    > 
     <div> 
     <h2>About This Site</h2> 
     </div> 
     <p> 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
     </p> 
    </div> 
    ` 
}) 
export class HomeAboutComponent {} 

스타일 클래스를 적용하여 페이지의 위 텍스트를 가운데에 배치했습니다.

styles: [` 
    .aboutContainer { 
     margin: 0 auto; 
    } 
    `], 

CSS 클래스를 추가하는 것이 너무 많아서 div을 중심에두고 flex을 50%으로 설정해야합니다. 모두 flex 레이아웃입니다. 나는 어디서 잘못 될지 너무 확신하지 못한다.

Answer 1

`<div fxLayout="column" fxLayoutAlign="center center"> 
    <div> 
    <h2>About This Site</h2> 
    </div> 
    <p> 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
    TEXT TEXT TEXT TEXT 
    </p> 
</div>` 

나는 이것이 당신이 @Harpal

찾고있는 것을 생각