2017-04-08 69 views
2

我现在有这看起来分量股利,如:中心对准柔性布局

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

将会产生这样的: enter image description here

的样子,我以后是这样的: enter image description here

我将上面的文字通过应用样式类居中在页面上:

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

添加一个CSS类似乎有点太多了,我应该能够集中div,并设置一个flex50%所有flex-layout。我只是不太确定我出错的地方。

回答

-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