html - 无法将大字体的文本居中

Question

我尝试了 line-height 等，但似乎当内容有大字体时，它会在上方和下方产生额外的空白。有没有办法让容器获得内容的确切高度，不包括上面的空格？其他浏览器也一样吗？我现在正为此严重脱发。谢谢!

这是CSS:

.raf {
    margin: 20px auto;
    height: 100px;
    width: 200px;
    overflow: hidden;
    border: solid 1px #000;
    text-align: center;
    font-size: 0;
    display: block;
    position: relative;
}

.text {

    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    color: #000000;
    font-size: 52px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    letter-spacing: 17px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 94px;
    height: 54px;
    overflow: hidden;
}

.innerText {
    float: left;
    overflow: hidden;
    border:solid 1px #CCC;
}

HTML:

    <div class="text">

        <div class="innerText">

            39

      </div>

    </div>

</div>

Answer 1

.text {
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
color: #000000;
font-size: 52px;
font-weight: bold;
display: inline-block;
position: absolute;
letter-spacing: 17px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 111px;
height: 54px;
overflow: hidden;
line-height: 1;
}
.innerText {
float: left;
overflow: hidden;
border: solid 1px #CCC;
padding-left: 17px;
}