Question

我尝试了这样的代码：

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

但这不会使音频播放器居中，因为div会扩展以占用所有可用空间。是否有一种很好的方法可以将音频播放器集中在每个浏览器上而不会破坏它？

Answer 1

在音频组件容器上使用display: table，这将适合音频组件的大小，margin: 0 auto将使其居中：

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

Answer 2

我刚刚在YouTube上乱搞了EJ-Media的内容，并遇到了同样的愿望。毫无疑问，这是一个非常直接的方式来完成你正在尝试的东西，也许这就是：

<audio controls="audiocontrols"  style="display:block;margin:auto; text-align: center">

Answer 3

您可以尝试使用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 4

将音频元素设置为display: block; margin 0 auto;。无需包装纸。像这样：

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

Answer 5

将音频包裹在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;}

Answer 6

<div align="center">
<audio controls src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>

or

<div align="center">
<audio controls>
<source src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>

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

6 个答案: