/ / Wyśrodkuj wyrównanie elementu div za pomocą układu flex - układ kątowy, kątowy-flex

Wyśrodkuj wyrównanie elementu div za pomocą układu flex - układ kątowy, kątowy-flex

Obecnie mam komponent, który wygląda jak:

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

Który produkuje to: wprowadź opis obrazu tutaj

Spojrzenie, na które patrzę, jest następujące: wprowadź opis obrazu tutaj

Wyśrodkowałem powyższy tekst na stronie, stosując klasę stylu:

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

Dodanie klasy CSS wydaje się nieco zbyt duże, powinienem być w stanie wyśrodkować div i ustaw a flex do 50% wszystko z układem flex. Po prostu nie jestem zbyt pewny, gdzie idę źle.

Odpowiedzi:

-1 dla odpowiedzi nr 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>`

Myślę, że właśnie tego szukasz w @Harpal