如何正确居中对齐 mat-chip-list？答案

【问题标题】：How do I properly center align mat-chip-list?如何正确居中对齐 mat-chip-list？
【发布时间】：2021-07-12 15:18:53
【问题描述】：

chips not center aligned in the first card

我有两张 mat-cards，每张卡片都有一个 mat-chip-list。当芯片列表为 5 或更大时，芯片的对齐方式在左侧。请问我是什么问题？

mat-card {
    height: 752px;
    text-align: center;
    display:flex;
    flex-direction: column;
}

mat-card-header {
    display: block;
    flex-direction: row;
    flex-shrink: 0;
}

.mat-card-content{
    flex-grow: 1;
    overflow: auto; 

}

<div fxLayout="row wrap">
        <div fxFlex="33%">
            <mat-card class="mat-elevation-z4">
                <mat-card-header>
                    <mat-card-title>
                        <h2>title goes here</h2>
                    </mat-card-title>
                </mat-card-header>
                <img class="imageBorder" src="assets/laptop-code-solid.svg" alt="" />
                <mat-card-content>
                    content here
                </mat-card-content>
                <mat-card-actions fxFlexAlign="center">
                    <mat-chip-list aria-label="Languages">
                        <mat-chip>C#</mat-chip>
                        <mat-chip>.Net</mat-chip>
                        <mat-chip>SQL</mat-chip>
                        <mat-chip>
                            JavaScript
                        </mat-chip>
                        <mat-chip>HTML</mat-chip>
                        <mat-chip>Bootstrap</mat-chip>
                        <mat-chip>CSS</mat-chip>
                      </mat-chip-list>
                </mat-card-actions>
            </mat-card>
        </div>
</div>

【问题讨论】：

标签： html css layout flexbox angular-material

【解决方案1】：

mat-card {
    height: 752px;
    text-align: center;
    display:flex;
    flex-wrap: wrap;
    width:300px;
    
}

mat-card-header {
    display: block;
    flex-direction: row;
    flex-shrink: 0;
}

.mat-card-content{
    flex-grow: 1;
    overflow: auto; 

}

您可以将样式 css 与具有一定宽度的概念 flexbox flex-wrap 一起使用。有关 flexbox 概念和使用示例的更多详细信息，您可以查看： "https://www.w3schools.com/css/css3_flexbox_container.asp"

【讨论】：

【解决方案2】：

请在<mat-card-action>标签中添加以下样式-

display: flex;
justify-content: center; // horizontally centered

因为所有芯片项都属于 parent 。 Flex 处理其直接子项。

请参阅此内容以更好地理解 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：