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

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

检查这个

＆＃13;

＆＃13;

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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;