align input text vertically

Question

I have a input text element whose height is adjusted and the text is aligned to right.

How can I align it vertically (on baseline)?

I tried adding some padding to the input elememt at the top and it works. However, I would like to know if there is any property that can be set to align it vertically.

I also tried to set display: inline-block and vertical-align: text-bottom but didn't work.

This is my input element:

<input id="display" type="text" />

Here is the css code:

form #display {
    height: 10 %;
    width: 100 %;
    border: none;
    background-color: rgb(12, 37, 30);
    color: white;
    text-align: right;
    padding-right: 20px;
    font-family: 'Gotham Rounded Light', sans-serif;
    font-size: 12px;
}

Answer 1

You can try a couple of solution,

vertical-align: middle

another one

input[type=text] {
 height: 15px; 
 line-height: 15px;
}