重新定位材料标签控件

我在使用HTML Label元素定位文本块时遇到问题 . 此元素包含一个mat-form-field输入控件，当屏幕截图显示输入控件底部的标签文本行时，它应在中心对齐 .

正如您所看到的Trader Reference [07]文本太低，我需要将其向上移动几个像素，但我尝试过的所有内容都失败了 .

我应该提到我正在尝试使用Angular Material控件

代码如下

<div class = "wrapper">
  <div>
  <mat-accordion>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight">
      <mat-panel-title>
     <h4> Declaration Type</h4>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div class="field">
        <label class= "field-label">Decln Type [01]:
            <mat-form-field>
                <mat-select class="declaration-type-combobox">
                  <mat-option *ngFor="let declarationType of declarationTypes" [value]="declarationType.value">
                    {{declarationType.value}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
        </label>
        <label class= "field-label">Badge Codes:
          <mat-form-field>
              <mat-select class="badge-codes-combobox">
                <mat-option *ngFor="let badge of badges" [value]="badge.code">
                  {{badge.code}} -  {{badge.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </label>
    </div>
    <div class="field">
        <div>
            <label>Trader Referecne [07]:
            <mat-form-field>
                <input matInput>
              </mat-form-field>
            </label>
          </div>
  </div>
    </mat-expansion-panel>
</mat-accordion>
</div> <!--End wrapper-->
</div>

这是CSS

.wrapper {
  margin-top: 30px;
  margin-left: 30px;
}

/* contains a label and a value */
.field {
  display: flex;
  margin: 0 0 0 0;
}

.field-label {
  width: 35%;
}

.field-value {
  width: 60%;
  float: right;
}

.field label + label /*label after another label */
 {
  margin-left: 30px;
}

.declaration-type-combobox {
  width: 400px;
  max-width: 400px;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 10px;
  padding: 9px;
}

.badge-codes-combobox {
  width: 200px;
  max-width: 200px;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 10px;
  padding: 9px;
}

.form-field {
  width: 380px;
  max-width: 380px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  font-size: 12px;
  height: 20px;
  max-height: 20px;
}

::ng-deep .mat-select-panel mat-option.mat-option {
  height: unset;
}

::ng-deep .mat-option-text.mat-option-text {
  word-wrap: break-word;
  white-space: pre-line;
  padding: 5px;
  margin: 2px;
  line-height: 15px;
}

::ng-deep .mat-form-field-underline {
  display: none;
}

.mat-expansion-panel-header.mat-expanded {
  background: #673ab7;
}

input {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 9px;
  padding: 9px;
  width: 200px;
}