在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中的width属性。

有没有办法在CSS或Javascript中执行此操作？如果有人能够将我指向网络上的相关资源，那将是一个奖励。

Answer 1

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

此外，如果您使用的是浏览器音频控件，请记得将controls添加到代码中，如下所示：

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

Answer 2

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