angular - mat-grid-list 的垂直对齐方式

Question

我正在使用角度 6.0.9

我想创建一个非常简单的布局：

• 在页面的最顶部，有两个选项卡可以在创建项目或查看现有项目之间进行选择。
• 创建项目是一种简单的形式
• 查看项目是一个两行视图：左侧是项目列表，右侧是一个面板，当在左侧列表中选择某些内容时，该面板会更新项目详细信息。

这是我的布局的样子：

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>View items</ng-template mat-tab-label>
        <!-- This list is for the 2 columns layout -->
        <mat-grid-list  cols="2" rowHeight="1:1" gutterSize="0">
            <!-- Firt column: the list of items -->
            <mat-grid-tile>
                <!-- Just to have some fancy borders around the item list, I put it in a mat-card -->
                <mat-card>
                    <!-- List of items -->
                    <mat-list>
                        <mat-list-item *ngFor="let item of items">
                            ...
                        </mat-list-item>
                    </mat-list>
                </mat-card>
            </mat-grid-tile>
            <!-- Second column: selected item details -->
            <mat-grid-tile>
                <!-- The details of the item -->
                <mat-card>
                    ...
                <mat-card>
            </mat-grid-tile>
        </mat-grid-list>
    </mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>Create item</ng-template mat-tab-label>
        ...
    </mat-tab>
</mat-tab-group>

截屏：

我只有以下 CSS，width: 100%否则我添加了卡片不占用整个列宽。

mat-card {
    width: 100%;
}

我有两个问题：

• 首先，列在页面中垂直居中。也就是说，项目列表的卡片和项目详细信息的卡片不在选项卡的正下方，而是位于页面中间。

• 其次，我真的不明白我应该如何使用有角度的材料。在比较材料与角度/材料的文档时，我看到材料具有“mdc-layout-grid-cell-align”，但我不知道在使用材料/角度时如何使用它！

我尝试在 CSS 和特定于材质的标签中添加layout-align或mdc-layout-grid-cell-align几乎无处不在。没有成功。

标签： angularangular-material2