所有浏览器的HTML 5音频中心播放器 [英] Center HTML 5 Audio Players for All Browsers

问题描述

我尝试过这样的代码：

<div style="margin: 0 auto;">
   <audio controls ....>
       ....
   </audio>
</div>

但这不会使音频播放器居中，因为div会扩展以占用所有可用空间。

but this will not center the audio player because the div will expand to take up all available space. Is there a good way to center the audio player on EVERY browser without breaking it?

推荐答案

尝试使用，是一种在每个浏览器上将音频播放器居中放置的好方法吗？ 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

这应该可行在所有现代浏览器上都可以。

This should work fine on all the modern browsers.

这篇关于所有浏览器的HTML 5音频中心播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！