垂直对齐输入元素中间的浮动标签

所以,我不想使用占位符,相反,我想使用离子标签一样的占位符。我需要垂直对齐 漂浮

这是我目前得到的:

    <ion-item>
      <ion-label floating class="label__placeholder">SMS</ion-label>
      <ion-input name="first_name"
        type="text"
        ngModel
        required>
      </ion-input>
    </ion-item>

SCS:

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      margin-bottom: 5px;
      padding-left: 15px;

      &.label__placeholder {
        position: absolute;
        bottom: 30px;
      }
    }

这是现在的图片,以及未点击离子输入时离子标签的外观:

这是当我点击离子输入时,离子标签在离子输入的顶部,但它不可见:

点击ion input时应该是这样的:

我设法将离子标签放置在离子输入的中间,但当我单击离子输入时,离子标签位于离子输入的顶部,它不可见,好像它在后面的某个地方,不知道在哪里。也尝试使用z索引,但没有任何帮助。