在通过 line-height设置居中时遇到的问题

设置了一个容器
此时通过设置子元素的line-height与元素本身高度相等来设置居中

.top-bar{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
}

1、没有设置font属性，正常居中

.inside-bar a{
    text-decoration: none;
    font-size: 12px;
    color: #B0B0B0;
    display: block;
}

2、引入font 此时破坏了之前的行高，不会居中

.inside-bar a{
    text-decoration: none;
    font: 12px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #B0B0B0;
    display: block;
}

3、去掉display:block;
此时会发现又居中了

.inside-bar a{
    text-decoration: none;
    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #B0B0B0;
}

**总结：**2、3中由于引入了font，font有自己的行高，所以破坏了top-bar规定的行高，所以2不居中，只要在2的font后面写line-height: 40px;重新给与正确的行高就能正常居中了。

为什么3的行高也被破坏了但能看起来居中呢，因为3没有设置display是block的时候，其默认是inline的，内联元素会自动适应行高，所以3也能正常显示。