知道如何在Chrome上垂直居中这个输入框占位符吗?输入框和占位符的字体大小是故意不同的。Firefox和Safari中的输入框占位符显示为垂直居中,但在Chrome中显示的位置较低。
下面是一个示例,您可以看到居中在Chrome上不起作用。
<input class="input" placeholder="vertical center"/>
.input {
font-size: 14px;
&::placeholder {
font-size: 8px;
text-align: left;
color: green;
// transform-origin: 0% 50%;
// transform: translate3d(0, -2px, 0);
}
}
下面是显示该问题的codepen:https://codepen.io/illusionfactory/pen/xxJZrYp?editors=1111
我尝试了其他帖子的答案,比如占位符上的转换,但似乎不起作用。
翻译移动了它,但是在所有浏览器中对齐都不好。任何帮助都是很感激的。
2条答案
按热度按时间js81xvg61#
mu0hgdu02#
你可以试试css flexbox.
}
如果你想了解css flex box,请参考this,它可能会帮助你。