css - 有没有办法在mat-datepicker中垂直居中datepicker？

Question

有两种状态:

状态 - 01:

状态 - 02:

在 state-01 中，“Choose a date”是垂直居中的。像那样，我试图将“选择日期”文本和所选日期垂直居中。不知道我错过了什么。请帮助我。

我的 stackBlitz 链接是 here

Answer 1

在你的情况下，当你需要使用 box angular-material 设置输入样式时，如果你想使用，请提供输入 'appearance="outline"`，就像这样

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>

否则，如果您想像您的示例中那样设置自定义样式，那么您需要一些样式，例如在它具有 float-label 时给它 padding ，如下所示

::ng-deep .mat-form-field.mat-form-field-should-float {
    padding-top:20px;
}

REASON: Normal behavior of mat-input is that it float the label above in some negative values, you can set that float to never so that label doesn't go above, for more you can read in its [OFFICIAL DOC]

( https://material.angular.io/components/input/overview )