Css 在移动浏览器中，输入内容的垂直对齐已关闭

我在移动web浏览器中遇到了输入组件内容垂直对齐的问题。输入从

react-phone-input-2

库导入。

正如你所看到的，手机浏览器中的数字稍微移到了顶部。有办法解决这个问题吗

以下是我的

css

样式：

input[type='tel'] {
    width: 100%;
    height: 36px;
    border: 1px solid #fff;
    color: ${({ theme }) => theme.text.white};
    font-family: Calibri;
    font-weight: 700;
    font-size: 23px;
    line-height: 100%;
    text-align: center;
    border-radius: 8px;
    text-align: left;
    background: ${({ hasError, theme }) => (hasError ? theme.palette.error : 'transparent')};
    display: 'inline-block';
}

---

尝试将padding top添加到输入中，或者可以减小输入的大小。