mat-toolbar对齐中材质图标中的文本答案

【问题标题】：text in material icons in mat-toolbar alignmentmat-toolbar对齐中材质图标中的文本
【发布时间】：2019-08-07 11:09:06
【问题描述】：

我正在使用 Angular 材质，mat-toolbar 来创建工具栏。我需要 mat-icon 和相关文本相互对齐（两行并居中对齐）

代码：

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

这段代码如下图所示：

但是，我要求它是这样的：

【问题讨论】：

标签： angular css angular-material material-design

【解决方案1】：

添加到仪表板跨度标识符，例如 class 或 id 。

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

然后，添加 display flex 样式。

#Dashboard
{
 display: flex;
 }

Stackblitz 示例。

【讨论】：

非常感谢您帮助我解决这个问题。如果我有多个工具栏按钮并排排列，那么对齐方式会向上倾斜，这如何与 flex 配合使用？
只是在此处添加，而不是增加工具栏高度，您可以使用 margin-top: -20px 将<span id="Dashboard">Dashboard</span> 移动到上方一点
你能告诉我它如何与工具栏中的多个项目一起工作
什么意思？你能举个例子吗？

【解决方案2】：

您可以使用flex 显示来执行此操作。

css

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

【讨论】：

我尝试过没有任何运气，图标和文本以及内联而不是列模式。谢谢。
我将 id 添加到仪表板 span : Dashboard 并将其添加到 css 中：#Dashboard{ display: flex; } 为我工作。
@AmitBaranes 这与 AmitChigadani 的建议是什么？
我将此代码添加到您共享的 stackblitz 示例中。

【解决方案3】：

试试这个

.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>

【讨论】：