在 html 中使用 style="vertical-align: text-top" 似乎没有任何效果答案

【问题标题】：In html use of style="vertical-align: text-top" doesnt seem to have any effect在 html 中使用 style="vertical-align: text-top" 似乎没有任何效果
【发布时间】：2020-11-19 02:00:03
【问题描述】：

我试图让音频控件后面的文本与音频控件中的文本完全一致，但它的位置更低，我对 style="vertical-align: text-top" 的使用似乎没有任何效果

<div>
  <span name="fileplay">
    <audio preload="none" controls="controls"><source src="file:/E:/Music/Wav/David%20Guetta/Guetta%20Blaster/01%20-%2007%20-%20Money.wav"></audio>
  </span>
  <span style="vertical-align: text-top">Keep <a href="file:/E:/Music/Wav/David%20Guetta/Guetta%20Blaster/01%20-%2007%20-%20Money.wav">E:\Music\Wav\David Guetta\Guetta Blaster\01 - 07 - Money.wav</a></span>
</div>

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

去掉vertical-align，用处很有限，它对齐包含行框内的内联元素，注意不是包含框，而是行框。

.player {
  display: flex;
  align-items: center;
}

audio {margin: auto 1.5rem;}

<div class="player">
  <span name="fileplay">
    <audio preload="none" controls="controls"><source src="Money.wav"></audio>
  </span>
  <span style="vertical-align: text-top">Keep <a href="Money.wav">Money.wav</a></span>
</div>

【讨论】：

您的代码看起来可以工作，但在应用于我的代码时无法正常工作。是不是因为我在 div 和音频之间有一个跨度（我需要这个额外的级别，所以我可以轻松隐藏音频控件）
不，我已经更新了代码，你需要让 div 显示 flex，你的代码没有类。并且注意文件名，它太长了，你可能想隐藏它的一部分。
谢谢你在我的代码中是正确的愚蠢错误（html是由java代码生成的）

【解决方案2】：

“text-top”将元素的顶部与父元素字体的顶部对齐，这通常用于将图像与“B”、“D”、“P”等字母的顶部对齐。

要将span 的上边框与其（非内联）父div 的上边框对齐，请使用vertical-align: top

参见此处（包括一些示例）：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

【讨论】：

vertical;-align:top 确实按照你说的做，但不是我想要的，因为我想与音频控件中的文本对齐，我尝试了 vertical-align:middle 是一样的就像我一开始的文字太低一样。
可能需要对字体大小或图像大小进行一些微调...顺便说一句，在我链接到的页面上，也有以百分比和em 为单位的个别设置示例跨度>