在div中水平对齐html5音频元素 [英] Horizontally align an html5 audio element in a div

问题描述

我得到了这个简单的div：

I got this simple div:

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

以及页面正文中的html5音频元素：

and an html5 audio element in the body of my page:

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

我希望音频元素（即显示给用户的音频控件）水平以div为中心。请注意我无法为音频控件或音频元素指定宽度属性（我试过，什么也没做），作为一般规则，我不知道浏览器之间的音频控件宽度（以像素为单位）（所以我可以不要调整div中的width属性。

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).

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

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.

推荐答案

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

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

Also if you are using the browser audio controls then remember to add controls to the tag, like so:

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

这篇关于在div中水平对齐html5音频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！