将 matSuffix 内容与 mat-form-field 输入中的文本对齐答案

【问题标题】：align matSuffix content with a text inside mat-form-field input将 matSuffix 内容与 mat-form-field 输入中的文本对齐
【发布时间】：2020-05-04 03:22:48
【问题描述】：

我有一个 <span>????</span> 作为 matSuffix 的 mat-form-field

<mat-form-field appearance="outline">
  <input matInput
    placeholder="Details"
    name="details"
    required />
  <span matSuffix>????</span>
</mat-form-field>

emigi与文字不对齐的问题

任何想法如何解决？

【问题讨论】：

如果您使用<mat-icon>，您将不会遇到任何问题，如果您使用任何自定义图标添加此样式.mat-form-field-flex{ align-items: center }，请确保将此样式仅应用于自定义图标输入。希望它有所帮助:)

标签： angular input angular-material

【解决方案1】：

使用 DIV 并尝试调整图标的位置以补偿默认字体大小 16px 和标准 mat-icon 后缀 24px 的大小之间的差异：

<div matSuffix style="position: relative; bottom: 8px;">?</div>

【讨论】：

我最终做了同样的事情

【解决方案2】：

您可以通过覆盖材质类来修复它。即:host /deep/ .mat-form-field-suffix { top: 0; }

【讨论】：

【解决方案3】：

只需覆盖 mat-form-field-infix 和 mat-form-field-suffix 类如下

.mat-form-field-infix {
   top: 0em !important;
}      
.mat-form-field-suffix {
   top: 0em !important;
}

【讨论】：