角度/角度材料元素定位

Question

我在使用我通常使用的方法在angular中对齐像mat-grid-list这样的项目时遇到了一些问题。下面你会看到我在一个宽度受限的容器内的div标签里有一个简单的网格列表。当我尝试将容器与页面中心对齐时，使用简单的" align -items/text“将网格列表一起带来时，它不起作用，如果我使用Display:Flex；mat-grid就消失了。有没有一种方法可以让受约束的"exampleDiv“位于页面的中心，而不会使mat-grid-list消失？谢谢

(附注:我尝试在div标签中添加(fxLayout=“行”fxLayoutAlign=“空格-环绕中心”)，但也不起作用)

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>Edit - 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%;
}

Answer 1

它看起来没有居中，因为您的.exampleDiv css类具有width: 80%属性。

删除该属性后，它的位置应该是您想要的位置。