为什么a标签的行高属性失效啊？

Question

怎么回事啊，a标签里的属性为什么失效啊，我想让a标签里的文字垂直居中，按道理设置了height和line-heightj就可以啊，我也转化了a为块级元素，还是不行啊，谁知道的帮我看一下可以吗，感谢！好懵逼啊！

<div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="">前端开发</a></li>
                    <li><a href="">后端开发</a></li>
                    <li><a href="">移动开发</a></li>
                    <li><a href="">人工智能</a></li>
                    <li><a href="">商业预测</a></li>
                    <li><a href="">云计算&大数据</a></li>
                    <li><a href="">运维&从测试</a></li>
                    <li><a href="">UI设计</a></li>
                    <li><a href="">产品</a></li>
                </ul>
            </div>
        </div>
 </div>

* {
    margin: 0;
    padding: 0;
}

/* 定义版心，之后有需要的盒子直接调用 */
.w {
    width: 1200px;
    margin: 0 auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.banner {
    height: 420px;
    background-color: #1c036c;
}

.banner .w {
    height: 420px;
    background-image: url(images/banner2_20190819_210028.png);
}

.banner .w .subnav {
    width: 195px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.3);
}

.subnav ul li {
    height: 45px;
    line-height: 45px;
}

.subnav ul li a {
    display: block;
    height: 45px;
    padding: 0 20px;
    line-height: 45px;
    font: 14px "Microsoft YaHei";
    color: #fff;
}

Answer 1

覆盖了