为所有浏览器居中HTML 5音频播放器

Question

我尝试了类似这样的代码：

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

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

- thatidiotguy

---

为什么不将DIV的宽度设置为100％，并将音频样式设置为margin: 0 auto; 然后看看是否有效。 - Si8

尝试使用此链接在div中水平对齐html5音频元素 - liebs19

@Adrift 我不确定inline-block和text-align一起使用是否完全正确，但它可以工作。如果你发布一个答案，我会接受的。 - thatidiotguy

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 这在所有现代浏览器上都应该正常工作。

- Sandip Nirmal

Answer 2

将音频元素的样式设置为display: block; margin 0 auto;。不需要包装器。就像这样：

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

- shalometz

Answer 3

我只是在YouTube上玩弄EJ-Media的东西时遇到了同样的愿望。这无疑是一种非常直接的方法来实现你想要的，也许可以这样做：

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

- Jonathan

Answer 4

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

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

- StudioTime

Answer 5

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

- Tiago Firmino

---

代码总是很好的，但是包含一些关于你的解决方案如何回答原始问题的注释或上下文也会有所帮助。 - craigcaulfield

Answer 6

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

- Robert Morel

---

没有（或曾经没有）保证用户正在使用Bootstrap，我建议您声明这需要Bootstrap才能正常工作，如此处所述：http://getbootstrap.com/css/#overview-container - Draken