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

Question

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

有什么办法可以解决这个问题吗？

提前致谢: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;
}

Answer 1

如果您想将文本（水平：左右）和占位符居中，请编辑 ionic-input 的原生 class :

.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

在垂直编辑后，您必须尝试这样的操作：

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

Answer 2

我做的是：

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

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

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

Ionic 3 how to Vertically center text in custom ion-input?

css

css-position

ionic-framework

ionic2

ionic3