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

Question

所以，我不想使用占位符，而是想像占位符一样使用离子标签。我需要在离子输入元素内垂直对齐 FLOATED 离子标签，当用户单击 and/or 在离子输入字段中输入文本时，离子标签应位于顶部它。

这是我目前得到的：

离子：

    <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 的中间，但是当我单击 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 的中间垂直对齐浮动标签

Vertically aligning floated label in the middle of an input element Ionic

css

label

position

vertical-alignment

ionic2