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

【问题标题】：Vertically aligning floated label in the middle of an input element Ionic在输入元素 Ionic 中间垂直对齐浮动标签
【发布时间】：2018-01-11 03:46:36
【问题描述】：

所以，我不想使用占位符，而是想使用离子标签之类的占位符。我需要在离子输入元素内垂直对齐 FLOATED 离子标签，当用户单击和/或在离子输入字段中输入文本时，离子标签应保持在其顶部。

这是我目前得到的：

离子：

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

【问题讨论】：

css class "label__placeholder" 是做什么的？
@PrerakTiwari 它将标签放置在离子输入的中间。我为其提供了 scss 样式，只是对其进行了编辑以使其更引人注目
尝试删除 position:absolute，它应该可以工作。
@PrerakTiwari 我按照您的建议删除了 position: absolute ，现在标签在离子输入顶部时可见，但当它在其中时（未单击离子输入时）它不是在离子输入的中间垂直对齐，它应该是。任何建议如何解决这部分？
@PrerakTiwari O.K.我更新了我的问题，所以你现在可以看到。第一张图片是我需要离子标签在未点击离子输入时的样子，第三张图片是点击离子输入时的样子。这是我现在使用您的代码得到的图片：imgur.com/zK1RgWo 您可以看到 ion-label 不在 ion-input 的垂直中间，我们需要让它去那里:)

标签： css ionic2 position label vertical-alignment

【解决方案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;
      }
    }

以下是未单击 ion-input 和单击时的外观：

【讨论】：