HTML/CSS -lineheight 是否影响 标签？

Question

所以我想做这样的事情:

(我正在尝试复制亚马逊只是为了练习)

但是当我尝试一种更短更好的方法时，即将显示更改为内联 block 。然后为了使它居中，我将使 line-height 类似于 height。

但这引起了一个问题，“类别”一词也被下推了。所以它看起来像这样:

这是代码，我该如何修改？

HTML:

<ul>
  <li> <a class="nav-text" href="file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> 
  </li>
</ul>

CSS:

.nav-text {
    display: inline-block;
    height: 100px;
    padding: 0 20px;
    line-height: 100px;
    text-decoration:none;
    font-size: 23px;
    font-family: "Times New Roman", Times, serif;
    color: white;
    font-weight: 700;
    margin-right: 30px;
}

Answer 1

您根本不需要更改a 的显示。 a 应该有:

 { vertical-align:middle; } 

为它设置，高度和所有其他应该在 li 的规则中设置，而不是 a。事实上，其他一些 CSS 属性也可以出来。

我还更新了 fiddle 以移动嵌套在 a 元素中的 p 元素，这样它现在就是 a 的父元素 元素(在语义上更正确一些)。

https://jsfiddle.net/3Lsm4prg/4/