html - 如何将 html 音频播放器居中/居中到网页中间？

Question

问题

我一直在尝试将我的 HTML 音频播放器置于我的 GitHub Pages 静态网站的中心/中心。我已经在 HTML 和 CSS 中尝试过这个。我已经删除了几次缓存以确保这不是问题的根源。 Chrome 浏览器/Mac 操作系统 10.14。

代码片段

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

到目前为止的尝试

尝试 #1 - 创建一个“中心”类并应用内联

代码顶部(在样式标签中):

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

代码底部:<source src="etc.mp3" type="audio/mpeg" class="center"/>

尝试 #2 - 将 id 标签添加到音频播放器并将文本居中对齐

代码顶部(在样式标签中):

#audio {
    text-align: center;
  }

代码底部:<source id="audio" src="etc.mp3" type="audio/mpeg"/>

尝试 #3 - 在音频播放器周围添加 div 标签并将文本居中对齐

代码顶部(在样式标签中):

  #audio {
    text-align: center;
  }

代码底部:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

尝试#4 - 垂直居中对齐文本

代码顶部(在样式标签中):

  #audio {
    vertical-align: center;
  }

代码底部:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

尝试#5 - 将内容居中对齐

代码顶部(在样式标签中):

#audio {
    justify-content: center;
  }

代码底部:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

尝试 #6 - 将 self 对齐到中心

代码顶部(在样式标签中):

#audio {
    align-self: center;
  }

代码底部:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

尝试#7 - 将音频播放器显示为内联 block

代码顶部(在样式标签中):

  #audio {
    align-self: center;
     display: inline-block;
  }

代码底部:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

尝试 #8 - 将音频播放器包装在表格中

  <div style="margin: 0 auto; display: table;">
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

尝试 #9 - 添加音频容器类并内联应用

代码顶部(在样式标签中):

.audio-container {
  display: flex;
  justify-content: center;
  align-items: center 
}

代码底部:

  <div class='audio-container'>
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

我还没有尝试过的

• 添加过多的填充，使音频播放器最终位于页面的中心/中心

研究来源

• MDN
• 大量的 StackOverflow 线程
• W3C 文档

解决方案 - *重要!* 更新于 13/03/2019

来自 Sandip Nirmal 在 this thread 中的回答- 删除缓存后也尝试 #9

代码顶部(在样式标签中):

 .audio-container {
  display: flex;
  justify-content: center;
  align-items: center 
}

代码底部:

  <div class="audio-container">
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

Answer 1

试试这样的 css:

.audio{
  width:100%;
}
.audio audio{
  margin: 0 auto;
  display: table;
}

“显示:表格；”是什么把戏。