css 在Chrome中垂直居中输入占位符

rvpgvaaj  于 2022-12-30  发布在  其他
关注(0)|答案(2)|浏览(130)

知道如何在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
我尝试了其他帖子的答案,比如占位符上的转换,但似乎不起作用。
翻译移动了它,但是在所有浏览器中对齐都不好。任何帮助都是很感激的。

js81xvg6

js81xvg61#

input {
  padding: 12px 2px;
  font-size: 19px;
}

input::-webkit-input-placeholder {
  color: green;
  font-size: 8px;
  position: relative;
  top: -4px;
}
<input placeholder="Vertical Center"/>
mu0hgdu0

mu0hgdu02#

你可以试试css flexbox.

&::placeholder {
margin: 0;
font-size: 11px;
display:flex;
align-items:center;
justify-content:center; 
color: green;

}
如果你想了解css flex box,请参考this,它可能会帮助你。

相关问题