Recording of the elements insepcted: https://streamable.com/nmhaa
The container within 'interactive-models' will simple not center inside his parent container.
in App Component Html:
<router-outlet fxLayout="column" fxFlexAlign="center" fxLayoutAlign="center center">
Inside Interactive-models commponent.html:
<div fxLayout="row" fxLayoutAlign="center center"
fxHide.lt-md="true" class="container theStupidList" fxFlex="90%">
The Material grid list:
<mat-grid-list class="item" fxFlex="90" fxFlexAlign="center"
cols="3" rowHeight="600" gutterSize="15px">
In my CSS:
.theStupidList {
justify-content: center!important;
justify-self:center !important;
justify-items: center!important; }
I may be wrong here, but the component that you’re trying to display inside the router isn’t actually outlet’s child (it’s would be a sibling) if you look in the DOM. Therefore you need to flex the parent that holds the outlet. Just wrap the outlet in a div and center the the children.
<div fxLayout=“row” fxLayoutAlign=“center center”>
If you would like you can also set the fxFlexFill on that parent div to make sure it take the whole available space
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加