如何将离子输入文本与侧面的其他元素对齐

Question

我正在开发一个项目，遇到一个问题，其中包含占位符文本的离子输入文本比其旁边的文本稍高。我需要帮助调整它们。

这是我的代码。

  <ion-item>
  <h4 item-left> UserName: </h4>
  <ion-input placeholder="UserName" class="ion-padding"></ion-input>
  </ion-item>

  <ion-item>
  <h4 item-left> Profile picture: </h4>
  <ion-input placeholder="Profile picture" class="input"></ion-input>
  </ion-item>

  <ion-item>
  <h4> E-mail: </h4>
  <ion-input placeholder= "Email" inputmode="email"type="email" class="input"></ion-input>
  </ion-item>

这是输出：

Answer 1

有许多方法可以实现，所有这些方法都位于与CSS垂直对齐的晦涩而神秘的主题中。实现它的最常用，最快捷的方法之一是对子元素使用自动垂直边距。这样做，您的元素将垂直对齐：

<ion-item>
    <h4 item-left style="margin: auto 0">
          UserName:
    </h4>

    <ion-input placeholder="UserName" class="ion-padding" style="margin: auto 0"> 
    </ion-input>
</ion-item>

更多信息：https://css-tricks.com/centering-css-complete-guide/

无论如何，我建议您切换到display: flex，因为通常在编写移动应用程序UI时会很快满足您的所有需求。在这种情况下，h4会带来问题，请改用div。像这样：

<ion-item style="display: flex; align-items: center">
        <div item-left> UserName: </div>
        <ion-input placeholder="UserName" class="ion-padding"></ion-input>
</ion-item>

在这里查看display: flex的概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果有帮助，请支持我。