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