为啥在 <a> 中没有从 <li> 元素继承垂直对齐？
Posted
技术标签:
【中文标题】为啥在 <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 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？它可能在不同的浏览器中被继承？ 这些天浏览器或多或少地标准化了他们的默认样式表。 【参考方案1】：vertical-alignment: middle 仅适用于 table 或带有 display: table 的 div 的子级。
您可以在这里做的是将.topnav ul li a 中文本的line-height 与父级的高度匹配，或者为父级设置display: flex，然后您可以使用align-items: center 将父级内的所有内容垂直居中.
【讨论】：
以上是关于为啥在 <a> 中没有从 <li> 元素继承垂直对齐？的主要内容，如果未能解决你的问题，请参考以下文章
Qt正则表达式 如何得到字符串中所有满足条件的字符。这个正则为啥匹配不成功