将 div 与 flex-layout 居中对齐答案

【问题标题】：Centre aligning a div with flex-layout将 div 与 flex-layout 居中对齐
【发布时间】：2017-09-04 04:11:03
【问题描述】：

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

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。我只是不太确定我哪里出错了。

【问题讨论】：

标签： angular angular-flex-layout

【解决方案1】：

“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>

【讨论】：

【解决方案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

【讨论】：