角/角材料元素定位答案

【问题标题】：Angular/Angular material element positioning角/角材料元素定位
【发布时间】：2021-12-29 08:31:54
【问题描述】：

我在使用我通常使用的方法以角度对齐 mat-grid-list 等项目时遇到了一些问题。下面您将看到我在宽度受限容器内的 div 标签内有一个简单的网格列表。当我尝试将容器与页面中心对齐时，使用简单的“对齐项目/文本”将网格列表与它一起使用它不起作用，如果我使用 Display:Flex;网格消失了。有没有办法可以让受约束的“exampleDiv”到页面的中心而不会使 mat-grid-list 消失？谢谢

（P.S 我尝试在 div 标签中添加 (fxLayout="row" fxLayoutAlign="space-around center") 也不起作用）

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

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

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

删除该属性，它应该按照您想要的方式定位。

【讨论】：