How do I vertically center the text in an input element?

Question

I'm trying to implement a custom design for an input element, which requires me to use the font Akko Pro Light. However, when I do so, the text strangely aligns vertically to the top of the line. This is true for the placeholder text as well as any text I actually write into the element.

While testing, other fonts do not produce the same problem.

Answer 1

try using justify-content: center; in css along with text-align: center; unfortunately without seeing the code it is hard to know what you are doing to find what is happening

Answer 2

Make a padding to create a space arround and line-height . Awoid non-standard fonts, it reduces the permonance of your site.

 #field1 { line-height: 30px; padding: 10px; }

 field: <input type="text" value="field1" id="field1" /><br />