CSS выравнивание текста рядом с элементом <audio>

Question

Я пытаюсь выровнять текст по вертикали, чтобы он находился посередине аудиоплеера. Вот что я попробовал. Куда я иду не так?

<audio autoplay="autoplay" controls="controls">  
<source src="file.ogg" />  
<source src="file.mp3" />  
</audio>

<span style="vertical-align: middle">text</span>

Answer 1

Это работает (по крайней мере, в Firefox), хотя, возможно, это не самое элегантное решение:

<div>
<audio autoplay="autoplay" controls="controls" style="vertical-align: middle;">                                
<source src="file.ogg" />
<source src="file.mp3" />
</audio>
text
</div>

Answer 2

Попробуйте окружить все в div и стилизовать вертикальное выравнивание этого:

<div id="audio" style="vertical-align: middle;">
   <audio autoplay="autoplay" controls="controls">  
      <source src="file.ogg" />  
      <source src="file.mp3" />  
   </audio>

   <span>text</span>
</div>