当字体不同地计算高度时，如何垂直对齐文本？

Question

如果这是重复的话，我事先表示歉意，但我似乎找不到答案。

我做了一些类似于进度条的内容。 这是一个内部包含p个元素的div。 但是我似乎无法将p元素垂直居中。

我现在所做的只是给父div填充了一些内容，逻辑上文本应该在中间，但似乎字体在计算高度时却有所不同。 因此，更改行高的解决方案将不起作用。 如果我将字体更改为Verdana，则文本会对齐，但这不是首选的解决方案。

片段：

 div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 20px; font-family: 'Hind Guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; } 

 <link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> <div> <p>1</p> </div> 

Answer 1

检查这个

 div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 20px; font-family: 'Hind Guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; vertical-align: middle; } 

 <link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> <div> <p>1</p> </div> 

Answer 2

这应该是您想要的。 您的问题是div的固定height为20px 。 如果将该值更改为28px ，则文本可能会垂直对齐。

 div { width: 90%; background-color: green; text-align: left; padding: 1.2%; border-radius: 5px; height: 28px; font-family: 'Hind Guntur', sans-serif; } p { font-size: 90%; display: inline; margin: 0; color: white; } 

 <link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet"> <div> <p>1</p> </div>