8

我目前有一个看起来像这样的组件：

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 类似乎有点太多了，我应该能够使用 flex-layout将其居中div并设置flex为all。50%我只是不太确定我哪里出错了。

4

2 回答 2

2 
`<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

于 2017-08-19T05:58:20.777 回答
0

“fxLayoutAlign”的第一个参数沿主轴对齐内容，主轴由“fxLayout”属性决定。

因此，如果您有 fxLayout="column"，则主轴变为“top -> bottom”，设置 fxLayoutAlign="center" 将使内容沿主轴（垂直）居中而不是水平（左 -> 右） .

要将内容水平居中对齐（左 -> 右）并将 div 的宽度设置为 50%，我们需要用 div 包裹我们的内容并添加 fxLayout="row" 然后设置其 fxLayoutAlign="center" 然后在子 div 上设置 fxFlex="50"。

要从上到下显示子项目并进一步居中对齐（从左到右），我们需要添加 fxLayout="column" 和 fxLayoutAlign="start center"。（在这种情况下，“start”是沿主轴的默认值（在这种情况下是 top->down，因为 fxLayout 设置为 column），center 是横轴的值（左 -> 右）

<div fxLayout="row" fxLayoutAlign="center">
    <div fxFlex="50" fxLayout="column" fxLayoutAlign="start 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>
</div>
于 2018-10-26T04:32:21.960 回答