Menu
How to properly vertically center placeholder in an input field?
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;
}
Here is the code https://jsfiddle.net/u6qfwg3w/
250
Either drag the image and wait for a horizontal (red) guide appearing in de middle of your image, then release the mouse button. Or select both the placeholder and the image (shift+click) and under picture tools, format tab, click the align button and choose align middle option.
In most of the browsers, placeholder texts are usually aligned in left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser.
Use the line-height property to make the placeholder vertically centered.
You forgot to add this css to input element:
input[type='text']{
font-size: 30px;
color: rgba(255, 255, 255, 0.4);
line-height: 30px;
}
Here is the fiddle: fiddle link
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
