适用于所有浏览器的Center HTML 5音频播放器
适用于所有浏览器的Center HTML 5音频播放器
提问于 2013-05-30 05:11:48
我试过这样的代码：
<div style="margin: 0 auto;">
<audio controls ....>
....
</audio>
</div>但这不会使音频播放器居中，因为div将扩展以占据所有可用空间。有没有一种好的方法可以在不破坏音频播放器的情况下将它放在每个浏览器的中心？
回答 6
Stack Overflow用户
发布于 2018-07-29 01:18:03
尝试使用类似于以下内容的flexbox：
# HTML
<div class='audio-container'>
<audio controls>
</audio>
</div>
#CSS
.audio-container {
display: flex;
justify-content: center;
align-items: center;
}你可以在这里查看https://jsbin.com/tojidar/edit?html,css,output
这应该可以在所有现代浏览器上很好地工作。
Stack Overflow用户
发布于 2018-12-16 09:51:22
将音频元素的样式设置为display: block; margin 0 auto;。不需要包装器。如下所示：
<div>
<audio controls style="margin: 0 auto; display: block;"></audio>
</div>
Stack Overflow用户
发布于 2018-03-07 01:47:12
在音频组件容器上使用display: table，这将适合音频组件的大小，然后margin: 0 auto会将其居中：
<div style="margin: 0 auto; display: table;">
<audio controls ....>
....
</audio>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16823868
复制相关文章
相似问题