css - 在输入元素 Ionic 的中间垂直对齐 float 标签

Question

所以，我不想使用占位符，而是想使用 ion-label 之类的占位符。我需要在 ion-input 元素内垂直对齐 FLOATED ion-label，当用户单击和/或在 ion-input 字段中输入文本时，ion-label 应位于其上方。

这是我到目前为止得到的:

ionic :

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

SCSS:

    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 时 ion-label 的样子:

这是当我点击 ion-input 时，ion-label 位于 ion-input 之上，但它不可见:

这是点击 ionic 输入时的样子:

我设法将 ion-label 放置在 ion-input 的中间，但是当我单击 ion-input 时，ion-label 位于 ion-input 的顶部并且不可见，就像它在后面的某个地方一样，不要不知道在哪里。也尝试使用 z-index，但没有帮助。

Answer 1

我设法解决了这个问题。我从 &.label__placeholder 中删除了 position: absolute 和 bottom: 30px 并改用此代码并且它有效:

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      padding-left: 15px;
      &.label__placeholder {
        font-size: 15px !important;
        line-height: 13px;
        margin-bottom: 0 !important;
      }
    }

以下是未点击 ionic 输入和点击 ionic 输入时的外观: