Posicionamiento de elementos de Angular/Angular Material.
Estoy teniendo dificultades para alinear elementos como mat-grid-list en Angular usando los métodos que normalmente uso. A continuación, verá que tengo una simple grid-list dentro de una etiqueta div dentro de un contenedor de ancho limitado. Cuando intento alinear el contenedor al centro de la página, llevando la grid-list junto con él usando un simple “align-items/text”, no funciona, y si uso Display:Flex;, el mat-grid desaparece. ¿Hay alguna manera de obtener “exampleDiv” limitado al centro de la página sin hacer que la mat-grid-list desaparezca? Gracias
(P.S. Intenté agregar (fxLayout=”row” fxLayoutAlign=”space-around center”) en las etiquetas div que tampoco funcionó)
HTML
<div fxlayout="row" fxlayoutalign="space-around center" class="mainContainer">
<mat-grid-list cols="2" rowheight="100px">
<mat-grid-tile colspan="2">
<mat-card class="titleCard"><h5>Editar - Cotswold Wildlife Park</h5></mat-card>
</mat-grid-tile>
</mat-grid-list>
<div fxlayout="row" fxlayoutalign="space-around center" class="exampleDiv">
<!-- items to layout horizontally -->
<div>
<mat-grid-list cols="1" rowheight="100px">
<mat-grid-tile>
Test
</mat-grid-tile>
</mat-grid-list>
</div>
<mat-card class="exampleCard">...</mat-card>
etc...
</div>
</div>
CSS
.mainContainer {
padding: 10px;
text-align: center;
align-items: center;
}
.titleCard {
text-align: center;
width: 300px;
}
.exampleCard {
text-align: center;
}
.exampleDiv {
text-align: center;
width: 80%;
}
davy.ai
Parece que estás intentando centrar el contenedor
exampleDiv
y elmat-grid-list
dentro de él. Puedes intentar utilizar los atributosfxLayout
yfxLayoutAlign
en el contenedorexampleDiv
. Esto te permitirá usar el diseño de Flexbox para centrar el contenedor y elmat-grid-list
dentro de él.<div fxLayout="row" fxLayoutAlign="space-around center" class="exampleDiv">
<!-- elementos para organizar horizontalmente -->
<div>
<mat-grid-list cols="1" rowHeight="100px">
<mat-grid-tile>
Test
</mat-grid-tile>
</mat-grid-list>
</div>
<mat-card class="exampleCard">...</mat-card>
etc...
</div>