中心對準柔性佈局

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-layout。我只是不太確定我出錯的地方。

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