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

我正在开发一个项目，我遇到了一个问题，离子输入文本（包括占位符文本）略高于它旁边的文本。我需要帮助调整它们

这是我的密码

  <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>

用户名：
个人资料图片：
电邮：

这是输出：

---

有很多方法可以做到这一点，所有这些方法都存在于与css垂直对齐这一模糊而神秘的主题中。实现这一点最常用、最快捷的方法之一是为子元素使用自动垂直边距。这样，您的元素将垂直对齐：

用户名：

更多信息：

无论如何，我建议您切换到

display:flex

，因为在编写移动应用程序UI时，通常可以快速满足您的所有需求。在这种情况下，

h4

会带来问题，请改用

div

。像这样：

用户名：

在这里查看

display:flex

：

---

如果它对您有帮助，请帮我重新投票。

官方推荐的在Ionic中对齐元素的方法是使用ionic3之后提供的实用程序css类。您可以在此处找到文档：

例如，如果要将离子输入向右对齐，只需执行以下操作：

 <ion-input class="ion-text-right"></ion-input>

请注意，在global.scss文件中启用了这些实用程序，如下所述：

如果您使用的是旧版本的Ionic（v2），则必须使用html属性，而不是css类