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

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/

如果对你有帮助，请给我点个赞。

Answer 2

官方推荐的在 Ionic 中对齐元素的方法是使用自 ionic3 以来可用的实用程序 css 类。您将在此处找到文档：https://ionicframework.com/docs/layout/css-utilities

例如，如果您想将离子输入端对齐到右侧，您只需执行以下操作：

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

注意在您的 global.scss 文件中启用实用程序，如下所述：https://ionicframework.com/docs/layout/global-stylesheets

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

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

How to align the ion input text with some other element on the side

html

css

ionic-framework

angular

ionic4