angular – 使用flex-layout对齐div

发布时间：2020-12-17 18:10:18 所属栏目：安全来源：网络整理

导读：我目前有一个组件,看起来像： import { Component } from '@angular/core';@Component({ selector: 'home-about',template: ` div fxFlex="50" fxLayout="column" fxLayoutAlign="center" div h2About This Site/h2 /div p TEXT TEXT TEXT TEXT TEXT TEXT TE

我目前有一个组件,看起来像：

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设置为中心,并使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!