垫-工具栏对齐方式中的材料图标中的文本

时间:2019-03-16 15:22:47

标签: angular css3 angular-material material-design

我正在使用有角度的材质mat-toolbar创建工具栏。我需要将mat-icon和相关文本彼此对齐(两行并居中对齐)

代码:

<mat-toolbar class="secondary-toolbar">
  <button mat-icon-button>
    <mat-icon>apps</mat-icon>
    Dashboard
  </button>
</mat-toolbar>

此代码显示的图像如下:

enter image description here

但是,我要求它必须是这样的:

enter image description here

3 个答案:

答案 0 :(得分:1)

添加到仪表板范围标识符,例如class或id。

<span id="Dashboard">Dashboard</span>

然后,添加显示弹性样式。

#Dashboard
{
 display: flex;
 } 

Stackblitz示例。

答案 1 :(得分:0)

您可以使用flex显示来做到这一点。

css

.secondary-toolbar button{
  display: flex;
  flex-direction: column;
}

答案 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>