0
186
VistasCentrar la alineación de un div con diseño flexible
Actualmente tengo un componente que se parece a:
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 {} Lo que produce esto: 
El look que busco es este: 
Centré el texto anterior en la página aplicando una clase de estilo:
styles: [` .aboutContainer { margin: 0 auto; } `], Agregar una clase CSS parece demasiado, debería poder centrar el div y establecer una flex al 50% todo con diseño flexible. Simplemente no estoy muy seguro de dónde me estoy equivocando.
2 Respuestas
Responde la pregunta0
`<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>`Creo que esto es lo que estás buscando @Harpal
0
El primer parámetro de "fxLayoutAlign" alinea el contenido a lo largo del eje principal y el eje principal se decide en función de la propiedad "fxLayout".
Entonces, si tiene fxLayout="column", el eje principal se convierte en "arriba -> abajo" y configurar fxLayoutAlign="center" hará que el contenido se centre a lo largo del eje principal (verticalmente) y no horizontalmente (izquierda -> derecha) .
Para centrar la alineación horizontal del contenido (izquierda -> derecha) y establecer el ancho del div al 50%, debemos envolver nuestro contenido con un div y agregar fxLayout="row" y luego establecer su fxLayoutAlign="center" y luego establezca fxFlex="50" en el div secundario.
Para mostrar los elementos secundarios de arriba a abajo y alinearlos más al centro (de izquierda a derecha), necesitaremos agregar fxLayout="column" y fxLayoutAlign="start center". (En este caso, "inicio" es el valor predeterminado a lo largo del eje principal (arriba->abajo en este caso, ya que fxLayout está configurado en columna) y el centro es el valor para el eje transversal (izquierda -> derecha)
<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>