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

Question

我试着做一个堆栈闪电战，但它不接受我的<mat-form-field>和<mat-label>标签，没有错误，我导入了所需的组件，但它不起作用。

但是如果我在这里发布代码，也许你可以帮助我，我有一个CSS的问题，因为我不知道移动<mat-label>标签的目标是什么，当我使用带有appearance="outline"的<mat-form-field>时，当标签在input field的中心时，我不能移动它，我想让它居中，但它在mat-form-field的底部。

如果我调整position:absolute的值，问题是，当单击发生时标签位于字段上方时，这些规则也将被应用，将浮动标签移动到错误的位置。

代码：

<div 
    id="test" 
    fxLayout="row" 
    fxLayoutGap="12px" 
    fxLayoutAlign="start center" 
    [class.hasFocus]="numberMatInput.value">
    <mat-form-field appearance="outline">
         <mat-label>KM</mat-label>
         <input matInput #numberMatInput [formControl]="numberInput">
    </mat-form-field>
</div>

和CSS：

#test ::ng-deep .mat-form-field-appearance-outline {
  width: 65px;
  height: 45px;
  line-height: 1.725;
}

#test ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0px 10px 0px 10px;
}

#test ::ng-deep .mat-form-field-infix {
  padding: 3px 0 3px 0;
}

这是想要的结果：

​

​

因此，基本上我需要在输入字段保持不变时移动标签，并在聚焦时将其留在上方浮动的相同空间中。

对我来说，这两条规则似乎只有一条，所以如果我移动未接触的标签，浮动的标签也会移动。

有人能帮帮忙吗？谢谢

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