用于mat-input和mat-form-field的CSS问题

Question

我尝试进行一次堆栈闪电射击，但是它没有错误地接受我的<mat-form-field>和<mat-label>标签，我导入了所需的组件，但无法正常工作。

但是，如果我在此处发布代码，也许仍然可以为我提供帮助，因为我不知道在使用{{ 1}}与<mat-label>一起使用，当标签位于<mat-form-field>上方的中心时，我无法移动它，希望它居中，但它位于{{1}的底部}。

如果我调整appearance="outline"的值，问题是，当单击发生时标签也移到字段上方时，也会应用这些规则，将浮动标签移到错误的位置。 / p>

代码：

input field

和CSS：

mat-form-field

这是想要的结果：

因此，基本上，我需要在未触摸输入字段时移动标签，并在焦点对准时将其放置在上方浮动的相同空间中。

在我看来，两者都只有一条规则，因此，如果我移动未改动的标签，则浮动标签也会随之移动。

有人可以帮忙吗？谢谢

Answer 1

尝试使用以下CSS：

#test ::ng-deep .mat-form-field-hide-placeholder .mat-form-field-label-wrapper {
   text-align: center;
   top: -25px;
}

#test ::ng-deep .mat-form-field-should-float {
   text-align: center;
}

Demo