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

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上有一个固定的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>

Answer 2

检查这个

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>