为什么在 <a> 中没有从 <li> 元素继承垂直对齐？答案

【问题标题】：Why vertical-align is not inherited in <a> from <li> element?为什么在 <a> 中没有从 <li> 元素继承垂直对齐？
【发布时间】：2022-01-07 01:13:10
【问题描述】：

首先我需要说我只是从 CSS 和 HTML 开始。

有以下代码：

body {
  font-family: Verdana, sans-serif;
}

.topnav {
  text-align: center;
}

.topnav ul {
  background-color: #2B3AA7;
  display: inline-block;
  border-radius: 15px;
  height: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.topnav ul li {
  display: inline;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
}

.topnav ul li a {
  text-decoration: none;
  color: white;
}

</head>

<body>
  <div class="logo">
    <img alt="ISPF logo" src="logosmaller.png">
  </div>
  <div class="topnav">
    <ul>
      <li>
        <a href="index.html" id="indexnav">Home</a>
      </li>
      <li>
        <a href="userdoc.html" id="userdocnav">Docs</a>
      </li>
      <li>
        <a href="download.html" id="downloadnav">Downloads</a>
      </li>
    </ul>
  </div>
  <div class="content-body">content</div>
  <div class="footer">
  </div>
  <br>
</body>

</html>

如您所见，蓝色区域中的项目未完全垂直对齐。我发现我需要在 a 元素中指定 vertical-alignment: middle; 以便在 li 元素中指定。为什么不继承？那些a在li里面，所以我猜应该是继承的。

例如，body 中的 font-family 可以在任何地方继承。

【问题讨论】：

"为什么不继承？" — 因为您的浏览器默认样式表的设计者做出了这样的选择。
“例如，body 中的 font-family 随处继承”——而 background-color 不是，所以这并不意味着什么。
@Quentin 所以这是浏览器特定的东西，而不是 CSS？它可能在不同的浏览器中被继承？
这些天浏览器或多或少地标准化了他们的默认样式表。

标签： html css vertical-alignment

【解决方案1】：

vertical-alignment: middle 仅适用于 table 或带有 display: table 的 div 的子级。

您可以在这里做的是将.topnav ul li a 中文本的line-height 与父级的高度匹配，或者为父级设置display: flex，然后您可以使用align-items: center 将父级内的所有内容垂直居中.

【讨论】：