Как я могу центрировать аудиоплеер? - PullRequest
Новая
       11

Как я могу центрировать аудиоплеер?

0 голосов
/ 19 февраля 2020

как я могу центрировать аудиоплеер? 

<!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 "

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020

Вы ищете что-то подобное? 

.audioWrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#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;
}
<div class="audioWrapper">
  <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>
</div>
0 голосов
/ 19 февраля 2020

Попробуйте это: 

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