在一个div中水平对齐html5音频元素

Question

我有一个简单的div：

#div-2 {
    margin-left: auto;
    margin-right: auto;
}

在我的页面主体中，我有一个HTML5音频元素：

<div ID="div-2">
        <audio id="a1" src="../../audio/sound_files/mystuff.ogg"></audio>
</div>

我希望音频元素（即向用户显示的音频控件）能够在 div 中水平居中。请注意，我无法为音频控件或音频元素指定宽度属性（我尝试过，但没有效果），而且通常我不知道不同浏览器中音频控件的宽度（以像素为单位），因此无法调整 div 中的宽度属性。是否有一种方法可以在 CSS 或者 JavaScript 中实现这一点？如果有人能够指向相关的网络资源，那将是一个额外的奖励。

- janesconference

---

我希望音频元素（即显示给用户的音频控件）在div中水平居中。如果div中没有其他内容（您在此处没有显示任何内容），那么div将不会比音频元素更宽，因此无论您如何对齐它在div内部，它都会被“居中”。 - jswolf19

在Chrome中，简单地使用#div-2 { text-align: center }就可以了。没有在其他地方测试过。 - thirtydot

Answer 1

#div-2 {
    display: table;
    margin: 0 auto;
}

此外，如果您正在使用浏览器音频控件，则请记得将controls添加到标签中，例如：

<audio id="a1" src="../../audio/sound_files/mystuff.ogg" controls></audio>

- Quiche_on_a_leash

---

谢谢！它完美地工作了（是的，我有“控件”，但我在第一篇帖子中省略了）。 - janesconference

Answer 2

<div align="center" id="player">
<audio controls>
<source src="name.mp3" type="audio/mpeg">
Unsupported browser!
</audio>
</div>

- noob