javascript 水平对齐 div 中的 html5 音频元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5232480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally align an html5 audio element in a div
提问by janesconference
I got this simple div:
我得到了这个简单的 div：
#div-2 {
margin-left: auto;
margin-right: auto;
}
and an html5 audio element in the body of my page:
以及页面正文中的 html5 音频元素：
<div ID="div-2">
<audio id="a1" src="../../audio/sound_files/mystuff.ogg"></audio>
</div>
I would like the audio element (that is, the audio controls displayed to the user) to be horizontally centered in the div. Please note I can't specify a width attribute for the audio controls or the audio elements (I tried, did nothing), and as a general rule I don't know the audio controls width (in pixels) between browsers (so I can't adjust the width attribute in the div).
我希望音频元素（即向用户显示的音频控件）在 div 中水平居中。请注意，我无法为音频控件或音频元素指定宽度属性（我尝试过，但什么也没做），并且作为一般规则，我不知道浏览器之间的音频控件宽度（以像素为单位）（因此我可以't 调整 div 中的宽度属性）。
Is there a way to do this either in CSS or, alternatively, in Javascript? It would be a bonus if someone could point me to a relevant resource on the web.
有没有办法在 CSS 或 Javascript 中做到这一点？如果有人可以将我指向网络上的相关资源，那将是一个奖励。
回答by Quiche_on_a_leash
#div-2 {
display: table;
margin: 0 auto;
}
Also if you are using the browser audio controls then remember to add controlsto the tag, like so:
此外，如果您使用浏览器音频控件，请记住添加controls到标签，如下所示：
<audio id="a1" src="../../audio/sound_files/mystuff.ogg" controls></audio>
回答by noob
<div align="center" id="player">
<audio controls>
<source src="name.mp3" type="audio/mpeg">
Unsupported browser!
</audio>
</div>
