CODEWITHSUNDEEP
htmlcssvertical-alignment
Paul Taylor
Paul Taylor

Reputation: 13210

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

Im trying to get the text following the audio control to be vericaly line with the text in the audio control but its way lower, my use of style="vertical-align: text-top" doesnt seem to have any effect

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

Upvotes: 0

Views: 406

Answers (2)

sfy
sfy

Reputation: 3228

Get rid of the vertical-align, the usage is very limited, it aligns inline elements inside its containing line box, note not containing box, but line box.

.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>

Upvotes: 1

Johannes
Johannes

Reputation: 67768

"text-top" aligns the top of the element with the top of the parent element's font, which is often used to align images with the top of letters like "B", "D", "P" etc.

To align a span's top border at the top border of its (non-inline) parent div, use vertical-align: top

see also here (including some examples): https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Upvotes: 0

Related Questions