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

Question

我试图让音频控件后面的文本与音频控件中的文本完全一致，但它的方式较低，我使用 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 - 07 - Money.wav</a></span>
</div>

Answer 1

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

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

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

Answer 2

去掉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>

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

In html use of style="vertical-align: text-top" doesnt seem to have any effect

html

css

vertical-alignment