适用于所有浏览器的中心 HTML 5 音频播放器

Question

我试过这样的代码：

<div style="margin: 0 auto;">
   <audio controls ....>
       ....
   </audio>
</div>

但这不会使音频播放器居中，因为 div 将扩展以占用所有可用空间。有没有一种好方法可以在不破坏每个浏览器的情况下将音频播放器居中？

Answer 1

尝试使用flexbox以下内容：

# HTML    
<div class='audio-container'>
   <audio controls>
   </audio>
</div>

#CSS
.audio-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

你可以在这里查看https://jsbin.com/tojidar/edit?html,css,output

这应该适用于所有现代浏览器。

Answer 2

将音频包装在 div 中：

HTML：

     <div class="container-fluid audioCenter">
            <audio controls>
                 <source src="audios/LearningToChooseYourThoughtsBreathTechnique.mov" 
                     type="audio/mpeg"></audio>
            </div>

CSS：

      .audioCenter{margin: 10px auto; width: 320px;}