我正在使用有角度的材质mat-toolbar创建工具栏。我需要将mat-icon和相关文本彼此对齐(两行并居中对齐)
代码:
<mat-toolbar class="secondary-toolbar">
<button mat-icon-button>
<mat-icon>apps</mat-icon>
Dashboard
</button>
</mat-toolbar>
此代码显示的图像如下:
但是,我要求它必须是这样的:
答案 0 :(得分:1)
添加到仪表板范围标识符,例如class或id。
<span id="Dashboard">Dashboard</span>
然后,添加显示弹性样式。
#Dashboard
{
display: flex;
}
Stackblitz示例。
答案 1 :(得分:0)
答案 2 :(得分:0)
尝试一下
.button-icon-text {
width: unset;
}
<button mat-icon-button class="button-icon-text" aria-label="Example icon-button with menu icon and text">
<mat-icon>menu</mat-icon>
<span>Menu</span>
</button>