无论您对它做啥，Angular Material Icon 显然都不会对齐？尽管 Flex 布局指令和 CSS 会影响它，但它从未对齐

Posted 2023-03-06

【中文标题】无论您对它做啥，Angular Material Icon 显然都不会对齐？尽管 Flex 布局指令和 CSS 会影响它，但它从未对齐

【英文标题】：Angular Material Icon clearly won't align no matter what you do to it? Although Flex Layout directives and CSS affect it, it's just never aligned无论您对它做什么，Angular Material Icon 显然都不会对齐？尽管 Flex 布局指令和 CSS 会影响它，但它从未对齐

【发布时间】：2019-01-19 14:53:11

【问题描述】：

示例：https://i.imgur.com/Xd0XkmE.png

我已经在父级上尝试了 fxFlexAlign - fxLayoutAlign，给它一个 ID 并使用 display:flex + justify-content:center 和 !important 对所有内容。

问题是——上面所有的东西都对它做了一些事情，它对 CSS 和 FlexLayout 指令做出反应，但无论如何它看起来仍然明显错位。

经过检查，很明显它是从其“容器”的右下角生长出来的，根本不关心以任何方式对齐。

在处理这些问题时我有什么遗漏吗？我查看了文档 + *** + google 了它，但找不到任何东西。

【参考方案1】：

最终使用 svg 图标将所有内容更改为令人敬畏的字体，导入每个图标有点繁琐，但保持包很小，并且不能真正与 svg 的价值争论。在接下来的十年里，我不会碰物质图标。

【讨论】：

您是否尝试设置font-size 属性？

@Edric 谢谢，这实际上是把事情搞砸了。如果我只是将字体大小保留为默认值，因为它周围的文字或黑魔法，一切都很好。改变字体大小，不对齐一切。如果我将其更改得足够高，从大约 50 大小开始，它将覆盖在文本上。我也尝试将它添加到一个 div 中，在我能想到的每个组合中跨度。在完全相同的事物/空间上使用字体很棒的 svg 图标非常简单和完美。

【参考方案2】：

您在发布的答案中的评论中提到您正在更改字体大小并触发问题。我认为我记得注意到这个错误 - 至少我知道我遇到了它。除了字体大小，您还需要相应地调整宽度和高度。实际上，最好定义类来处理所有这些并将它们应用于 mat-icon 元素。例如：

.mat-icon-16 
    font-size: 16px;
    width: 16px;
    height: 16px;


<mat-icon class="mat-icon-16">help<mat-icon>

请注意，line-height 也会起作用，但默认情况下它是“1”，因此您不需要更改它。

【讨论】：

谢谢，这是有道理的，这是我问题的解决方案，但我仍然想争辩说，仅仅为了改变图标的​​大小而经历这么多麻烦真的很糟糕。

我完全同意！