CSS垂直对齐占位符文本

我想垂直对齐文本输入框的占位符。CSS垂直对齐占位符文本

我已经得到了::--webkit和:--moz规则去，他们正在工作其他样式，而不是垂直对齐......

我在WebKit的规则试图vertical-align: middle;，并根据自身.input 。我也试着line-height: <same as the input box height>

jsfiddle.net/s3vpgxqg/

任何人都可以看到我错过了简单的事情？

谢谢！

来源

2016-09-28 Runny Yolk

奇怪！我也使用Chrome ... –

如果将其展开至更大的高度，则占位符在何处显示？ – StardustGogeta

更高的高度出现在中间，但绝对不在60px，而在更高的高度，我不能'vertical-align：top;'或者（不是我想要的）：http://jsfiddle.net/dfuobnnn /文本是否垂直对齐：在这个小提琴中，您最喜欢的是？ –

一个选项是更改输入的字体格式占位符（占位符继承格式）。

https://jsfiddle.net/rwh6hkc6/

html, body { 
 
    margin: 0; 
 
} 
 

 
.email.input { 
 
    text-indent: 40px; 
 
    font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    width: 400px; 
 
    border: none; 
 
    background-color: #FFCF6B; 
 
    font-size: 1.8em; 
 
    font-weight: 100; 
 
    padding: 10px 0; 
 
} 
 

 
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
 
    color: #B1B1B1; 
 
} 
 

 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
    color: #B1B1B1; 
 
    opacity: 1; 
 
} 
 

 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
    color: #B1B1B1; 
 
    opacity: 1; 
 
} 
 

 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
 
    color: #B1B1B1; 
 
}

<div class="centered"> 
 
    <div class="input"> 
 
    <input type="text" class="email input" name="email" placeholder="enter your email"> 
 
    </div> 
 
</div>

来源

2016-09-28 19:23:25

当您运行代码段时，占位符不是垂直对齐的 – achref

这是因为顶部和底部间距因字体而异。只需检查填充的顶部和底部 –

重点在于占位符字体大小与输入字体大小不同。 – Liangjun

CSS垂直对齐占位符文本

回答

相关问题