html - 如何使音频播放器居中?

标签 html audio center

我如何使音频播放器居中?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #playlist{
            list-style: none;
        }
        #playlist li a{
            color:white;
            text-decoration: none;
        }
        #playlist .current-song a{
            color:blue;
        }
        body {background-color: black;}
        h1 {color: white;}
        p {color: white;}
    </style>
    <link rel="shortcut icon" type="image/ico" href="/img/favicon.ico">
</head>
<body>
    <audio src="" controls autoplay id="audioPlayer">
        Sorry, your Browser doesn't Support HTML5!
    </audio>
    <ul id="playlist">
        <li class="current-song"><a href="/music/song1.mp3"></a></li>
        <li><a href="/music/song2.mp3"></a></li>
    </ul>
    <!-- <p>Back to <a href="https://URL/">URL</a></p> -->
    <script src="https://code.jquery.com/tt.js"></script>
    <script src="audioPlayer.js"></script>
    <script>
        audioPlayer();
    </script>
</body>
</html>

这是我到目前为止的内容:https://prnt.sc/r4o3nh
这就是我想要的:https://prnt.sc/r4o3en

我试过的
style =“display:block; margin:0 auto;
style =“position:absolute; top:0; left:0; width:100%; height:100%;”宽度=“1400”高度=“900”

最佳答案

试试这个:

audio#audioPlayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

关于html - 如何使音频播放器居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60303503/

相关文章:

javascript - 容器更改宽度后重新定位 Google map

javascript - 在 javaScript 中手动幻灯片放映

javascript - 砖石图像加载不工作

audio - 我们如何解决 HTTP 请求错误?错误 429,请求过多

javascript - 将音符与youtube视频分开,并使用客户端技术进行显示

css - anchor 不会在列表项内垂直居中

html - CSS:将图标悬停在图片/视频div顶部

html - 超大屏幕并非一贯静态

Cocoa:如何获取音乐文件的光盘编号标签?

css - 如何将主 div 水平居中并在其左侧仍然有一个 div