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垂直對齊佔位符文本

回答

相關問題