Javascript 当垂直对齐输入字段内的中心时，字符和数字的行为不同

嗨，我在我的项目中使用一些输入字段来重置密码功能。我希望输入值在输入字段内垂直对齐

当我在输入中正确对齐数值时，字符值未正确对齐。像这样

在本例中，我的CSS用于输入

width: 50px;
height: 48px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 2px;
text-align: center;

width: 50px;
height: 43px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 7px;
text-align: center;

当我在输入中正确对齐字符值时，数值未正确对齐。像这样

在本例中，我的CSS用于输入

width: 50px;
height: 48px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 2px;
text-align: center;

width: 50px;
height: 43px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 7px;
text-align: center;

在这些情况下，我试图更改

高度

和

填充底部

我的问题

如何同时垂直对齐数值和字符值的中心。我在这种情况下被困了一段时间。请帮忙。提前谢谢

**我已经在Safari和Chrome中进行了测试

这里是JSFIDLE链接->

margin:auto；
高度=宽度
注释填充底部

---

我认为

您可以为小写字母添加另一个类，使用不同的

行高数

，如下所示：

.circle div{
宽度：50px；
高度：50px；
线高：50px；
边界半径：50%；
显示：内联块；
文本对齐：居中；
字体大小：30px；
颜色：白色；
背景色：天蓝色；
浮动：左；
保证金：5px；
}
.小写{
线高：45px；
}

c
9
一个好问题！我认为，如果不为每个字符编码特定的值，那么对于任意字符来说，这是不可能的。line height=container height技巧将有效地垂直对齐容器中的一行文本，但不会对齐单个字符。原因是这些字符有不同的高度，但它们都位于大致相同的基线上（除了位于基线之下的字符，如g或y）。您可以做的一件事是强制用户只使用大写字母（通过css
文本转换：大写；
），这些字母和数字的高度可能或多或少相同


div.round{
高度：40px；
宽度：40px；
字体大小：40px；
线高：40px；
文本对齐：居中；
边框：2件纯黑；
边界半径：50%；
字体系列：arial；
显示：内联块；
}
上分区{
文本转换：大写；
}
a
9
C
7.

vs

A.
9
C
7
什么是完整的HTML和CSS？添加一个提琴示例以实时查看您的问题。我认为有些字体的数字和字符高度相同很多输入字段类似于@FastSnail Hi for Div，看起来还可以，但我尝试了输入字段的代码，似乎不起作用。您可以尝试输入字段吗？当然，对于输入字段，它需要是
高度
和
填充
值，而不是
行高度
，请检查此@KanishkaPanamaldeniya请检查我的更新答案，现在这都是jQueryGreat自动和动态的，谢谢。我会检查这个，给我一些时间：）：），谢谢你的支持你的意思是说
高度
和
宽度
应该设置为相等的值，并且
填充底部
应该被注释掉吗？请澄清你的答案；由于质量差，已经有人将其标记为删除。