Ionic 3 如何在自定义离子输入中垂直居中文本？答案

【问题标题】：Ionic 3 how to Vertically center text in custom ion-input?Ionic 3 如何在自定义离子输入中垂直居中文本？
【发布时间】：2018-11-13 17:26:15
【问题描述】：

您可以在图像中看到离子输入中的文本没有垂直居中。标准离子输入稍微偏离中心以看起来更好。

有没有办法解决这个问题？

提前致谢：D

编辑：我的意思是垂直而不是水平：/

编辑这是有人要求的代码，高度和字体大小在媒体查询中。

.email, .pass {
 width: 75%;
 max-width: 500px;
 border: none;
 background-color: #CC6992;
 font-family: Rubik;
 font-weight: lighter;
 color: #3C3C3C;
 border-radius: 5px;
 padding-left: 18px;
 margin: 0 auto;
}



::placeholder {
  font-family: Rubik;
}

【问题讨论】：

似乎他们正在为占位符使用绝对定位的标签，因此您必须调整它的 top 属性。
你的意思是垂直居中吗？水平是左/右，垂直是上/下。
@Josheph Webber 是的！对不起，我会编辑它。非常感谢您让我知道。
请添加代码，因为您已经更新了基本的 ionic 3 css
好的，我会这样做的。

标签： css ionic-framework ionic2 ionic3 css-position

【解决方案1】：

我做的是：

.vertical-align {    
    display: flex !important;
    align-content: center !important;
    align-items: center !important;
}

您可以删除!important，我只是在这里使用它们，因为我有其他类干扰。

【讨论】：

【解决方案2】：

如果要将文本（水平：左右）和占位符居中，请编辑 ionic-input 的本机类：

.text-input {
  text-align: center;
}

对于占位符：

.text-input::-webkit-input-placeholder {
  text-align: center;
}

.text-input:-moz-placeholder {
  text-align: center;
}

.text-input::-moz-placeholder {
  text-align: center;
}

.text-input:-ms-input-placeholder {
  text-align: center;
}

还要检查 ionic 的utilities，并尝试同时使用属性：text-center

在垂直编辑 f 之后，你必须尝试这样的事情：

display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;

【讨论】：