line-height的位置不同为什么会不生效(关键词-垂直居中)

line-height的位置不同为什么会不生效？区别在于line-height在前或后
此时不会生效

.aside-nav li{
    width: 190px;
    height: 28px;
    float: left;
    padding-left: 16px;
}
.aside-nav li>a{
    line-height:28px;
    font:14px "PingFang SC";
    font-weight: 600;
    color: #333333;
}

此时会生效，元素垂直居中

.aside-nav li{
    width: 190px;
    height: 28px;
    float: left;
    padding-left: 16px;
}
.aside-nav li>a{
    font:14px "PingFang SC";
    font-weight: 600;
    color: #333333;
   line-height:28px;
}

这篇博客: line-height的使用方式中的 二、line-height具体效果 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
以下回答由chatgpt基于相关博客总结生成:
line-height属性可以用于设置行间距（行高），通过调整行高可以实现文本的垂直居中效果。在解释line-height在前后位置的区别之前，先来理解一下line-height的原理。
根据参考资料段落4中的分析，行高等于一行的高度，这一行的高度包含了上下两个间距和文本内容本身。因此，设置line-height的值可以影响段落行高，从而实现垂直居中效果。
在解释line-height在前后位置的区别时，我们可以看参考资料段落3中的例子。首先，观察以下代码和效果：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container {
                width: 100px;
                height: 200px;
                line-height: 200px;
                margin: 0 auto;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            哈哈哈哈哈哈哈哈哈哈哈啊哈哈
        </div>
    </body>
</html>
```
代码中的container元素设置了宽度为100px，高度为200px，并且使用line-height属性将行高设置为200px。可以观察到，当文本内容超出容器宽度，导致自动换行后，垂直居中的效果不符合预期。这是因为自动换行后，每一行的行高仍然保持为200px，这是由于line-height属性在前面设置，覆盖了后面的对齐方式。因此，在这种情况下，line-height的垂直居中效果不起作用。
为了解决这个问题，可以借助display: table-cell和vertical-align: middle来实现垂直居中效果。修改代码如下：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .container {
                width: 100px;
                height: 200px;
                display: table-cell;
                vertical-align: middle;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            哈哈哈哈哈哈哈哈哈哈哈啊哈哈
        </div>
    </body>
</html>
```
通过将容器的display属性设置为table-cell，然后使用vertical-align属性将文本垂直居中，可以实现预期的垂直居中效果。
综上所述，line-height在前后位置的区别主要体现在覆盖对齐方式和实现垂直居中效果上。当line-height属性在前面设置时，它会覆盖后面的对齐方式，导致垂直居中效果不起作用；而当line-height属性在后面设置时，可以配合其他属性（如display: table-cell和vertical-align: middle）来实现垂直居中效果。

样式属性顺序不会影响结果，可能是内容或容器变动造成的，看看你的html怎么写的