輸入佔位符垂直對齊

如何在輸入字段中正確垂直居中佔位符？輸入佔位符垂直對齊

input[type='text']{ 
    background-color: rgba(255,255,255,.4); 
    border:3px solid rgba(0,0,0,.5); 
    min-height: 45px; 
    border-radius: 6px; 
    color:#fff; 
} 
input[type='text']::-webkit-input-placeholder { 
    font-size: 30px; 
    color: rgba(255, 255, 255, 0.4); 
    line-height: 30px; 
    text-transform: uppercase; 
    vertical-align: middle; 
}

下面是代碼https://jsfiddle.net/u6qfwg3w/

來源

2016-08-09 Razvan Cuceu

似乎心，你的意思水平？ – Ivan

@ Ivan不是真的。也許是因爲我使用Chrome？ https://s10.postimg.org/416p2ph2x/center.jpg –

你忘了添加此css到input元素：

input[type='text']{ 
font-size: 30px; 
color: rgba(255, 255, 255, 0.4); 
line-height: 30px; 
}

這裏是小提琴：fiddle link

來源

2016-08-09 15:29:33

謝謝，您的回答很有用，但如果我不希望輸入文本的字體大小爲30px？如果沒有解決方案，我會用你的答案。 –

我打算將此答案標記爲解決方案，因爲我會堅持這一點。但是如果有人對將來會遇到這種情況的同伴有一個答案，可以在這裏發佈。 –

@RazvanCuceu，也許你可以將位置應用於佔位符，也許它會起作用。嘗試！ –

我相信你已經設置min-height: 45px您應該在中設置。

如果您改變font-size，請參閱placeholder，佔位符將保持垂直居中。

請讓我知道您的反饋。謝謝！

input[type='text']{ 
    background-color: rgba(255,255,255,.4); 
    border:3px solid rgba(0,0,0,.5); 
    min-height: 45px; 
    line-height: 45px; 
    border-radius: 6px; 
    color:#fff; 
} 
input[type='text']::-webkit-input-placeholder { 
    font-size: 25px; 
    color: rgba(255, 255, 255, 0.4); 
    text-transform: uppercase; 
    vertical-align: middle; 
}

fiddle here

來源

2016-08-09 15:45:23 kukkuz

輸入佔位符垂直對齊

回答

相關問題