我目前有一个组件,看起来像：
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-layout将flex设置为50％.我不太确定我哪里出错了.
解决方法
`<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
