我试过这样的代码:
<div style="margin: 0 auto;">
<audio controls ....>
....
</audio>
</div>
但这不会使音频播放器居中,因为div将扩展以占据所有可用空间。有没有一种好的方法可以在不破坏音频播放器的情况下将它放在每个浏览器的中心?
发布于 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
这应该可以在所有现代浏览器上很好地工作。
发布于 2018-12-16 09:51:22
将音频元素的样式设置为display: block; margin 0 auto;
。不需要包装器。如下所示:
<div>
<audio controls style="margin: 0 auto; display: block;"></audio>
</div>
发布于 2018-03-07 01:47:12
在音频组件容器上使用display: table
,这将适合音频组件的大小,然后margin: 0 auto
会将其居中:
<div style="margin: 0 auto; display: table;">
<audio controls ....>
....
</audio>
</div>
https://stackoverflow.com/questions/16823868
复制相似问题