html - <a>带有高度的标签：100% 并且需要使文本垂直和水平居中</a>

使用填充而不是高度。我在片段下面更改了一些 CSS 代码检查

ul.nav{
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 4px;
}
ul.nav li{    
    float: left;
    background-color: #e4ffe4;
}
ul.nav li a{
      color: black;
    padding: 0.8rem 0.3rem;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-align: center;
}
ul.nav li a span.linkText{
  vertical-align: middle;
}
ul.nav li:hover{
  background-color: #b4ffb4;
}

<html><head></head>
<body>
<ul class="nav">
  <li>
    <a href="#">Content</a>
  </li>
  <li>
    <a href="#">Another</a>
  </li>
  <li>
    <a href="#">Final</a>
  </li>
</ul>
</body>
<html>

html - 带有高度的标签：100% 并且需要使文本垂直和水平居中

问题描述

解决方案

推荐阅读