水平对齐的HTML5音频元素在一个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内对齐，它都会“居中”。 – jswolf19 2011-03-08 12:43:34

只需'＃div-2 {text-align：center}'在Chrome中运行。没有在其他地方测试。 – thirtydot 2011-03-08 13:00:31

答

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

此外，如果你使用的浏览器音频控件，然后记得要加controls的标签，就像这样：

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

谢谢！它完美的工作（是的，我有“控制”，但我在第一篇文章中省略）。 – janesconference 2011-03-08 12:49:36

答

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