6

我试过这样的代码：

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

但这不会使音频播放器居中，因为 div 将扩展以占用所有可用空间。有没有一种很好的方法可以让音频播放器在每个浏览器上居中而不破坏它？

4

6 回答 6

6

尝试使用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-07-28T17:18:02.663 回答
3

将音频元素设置为display: block; margin 0 auto;. 不需要包装器。像这样：

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

于 2018-12-16T01:51:21.720 回答
1

在音频组件容器上使用display: table，这将适合音频组件的大小，margin: 0 auto然后将其居中：

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

于 2018-03-06T17:47:11.657 回答
1

我只是在 YouTube 上玩弄 EJ-Media 的东西，并遇到了同样的愿望。毫无疑问，这是一种非常直接的方式来实现你正在尝试的东西，也许是这样的：

<audio controls="audiocontrols"  style="display:block;margin:auto; text-align: center">
于 2018-05-28T22:43:18.647 回答
-1

将音频包装在一个 div 中：

HTML：

     <div class="container-fluid audioCenter">
            <audio controls>
                 <source src="audios/LearningToChooseYourThoughtsBreathTechnique.mov" 
                     type="audio/mpeg"></audio>
            </div>

CSS：

      .audioCenter{margin: 10px auto; width: 320px;}
于 2016-05-20T07:08:35.733 回答
-1 

<div align="center">
<audio controls src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>

or

<div align="center">
<audio controls>
<source src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>

于 2018-06-24T23:37:09.100 回答