带mat-icon的两个按钮间文本垂直对齐问题求助

我没法让包含mat-icon且带(click)点击事件的两个按钮和中间的文本完美垂直对齐。这些元素都放在row-pages容器里，用于图表和表格的分页功能。试过vertical-align、align-items等各种属性组合都没解决，附上相关代码和截图，恳请帮忙！

CSS 代码 #

.row-pages {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 1px;
    max-height: 20px;
    column-gap: 1px;
    vertical-align: middle;
    align-items: center;
}

button {
    font-size: 20px;
    margin-right: 5px;
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.mat-icon {
    font-size: 20px;
    height: 20px ;
    width: 20px;
}

span {
    font-size: 14px;
    vertical-align: middle;
}

HTML 代码 #

<button type="button" (click)="paginateChart('blah_chart', -1)">
    <mat-icon>navigate_before</mat-icon>
</button>
<span [textContent]="paginationText.blah_chart"></span>
<button type="button" (click)="paginateChart('blah_chart', 1)">
    <mat-icon>navigate_next</mat-icon>
</button>

效果截图 #

解决方案 #

问题出在你用grid布局来做横向线性排列的分页栏，grid更适合二维布局，换成flex布局会更容易控制垂直对齐。调整后的代码如下：

修改后的 CSS #

.row-pages {
    display: flex;
    align-items: center; /* 核心：让容器内所有元素垂直居中 */
    gap: 8px; /* 统一控制元素间间距，替代margin和column-gap */
    padding: 1px;
    height: 20px; /* 用固定height替代max-height，确保容器高度稳定 */
}

button {
    font-size: 20px;
    background-color: transparent;
    border: none; /* 简化写法 */
    cursor: pointer;
    display: flex;
    align-items: center; /* 确保按钮内的mat-icon垂直居中 */
    justify-content: center;
    padding: 0; /* 去掉按钮默认内边距，避免高度额外增加 */
}

.mat-icon {
    font-size: 20px;
    height: 20px;
    width: 20px;
}

span {
    font-size: 14px;
    line-height: 20px; /* 让文本行高和容器/图标高度一致，辅助垂直对齐 */
}

关键调整点 #

1. 替换布局方式：把grid改成flex，横向线性布局用flex更适配，align-items: center直接实现容器内元素垂直居中。
2. 按钮内部对齐：给按钮加上display: flex并设置内部居中，避免mat-icon在按钮里出现偏移。
3. 文本行高匹配：给span设置line-height: 20px，让文本的行高和容器、图标高度一致，确保文本垂直居中。
4. 统一间距控制：用gap替代按钮的margin-right，布局更整洁易维护。

内容的提问来源于stack exchange，提问作者Jerry Pass