水平对齐 div 中的 html5 音频元素答案

【问题标题】：Horizontally align an html5 audio element in a div水平对齐 div 中的 html5 音频元素
【发布时间】：2015-10-27 05:29:05
【问题描述】：

我得到了这个简单的 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 中做到这一点？如果有人可以将我指向网络上的相关资源，那将是一个奖励。

【问题讨论】：

“我希望音频元素（即显示给用户的音频控件）在 div 中水平居中” div 中是否还有其他内容（您这里不显示任何内容））。如果不是，则 div 不会比音频元素宽，因此无论您如何尝试在 div 中对齐它，它都会“居中”。
只需 #div-2 { text-align: center } 在 Chrome 中工作。没有在其他任何地方测试。

【解决方案1】：

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

此外，如果您使用浏览器音频控件，请记住将controls 添加到标签中，如下所示：

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

【讨论】：

【解决方案2】：

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

【讨论】：