Как центрировать / центрировать аудиоплеер HTML по центру веб-страницы?

Question

Проблема

Я пытался центрировать / центрировать мой аудиоплеер HTML, чтобы он находился в центре / центре моего статического веб-сайта GitHub Pages. Я пробовал это в HTML и CSS,Я несколько раз удалял кеш, чтобы убедиться, что это не является корнем моих проблем.Браузер Chrome / Mac OS 10.14.

Фрагмент кода

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

Пока предпринимаются попытки

Попытка # 1 - создайте класс 'center' и примените встроенный

Верх кода (втеги стиля):

  .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 - выравнивание себя по центру

Верх кода (в тегах стиля):

#audio {
    align-self: center;
  }

Нижняя часть кода:

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

Попытка № 7 - отобразить звукслой в виде встроенного блока

Верх кода (в тегах стиля):

  #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

Из ответа Сандипа Нирмаля в этой теме - также попытка № 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;
}

«display: table;»это то, что трюк.

Answer 2

Сначала должно быть

audio{
:
}  or `.audio{...}`

Поскольку #audio target IDs между тем audio предназначается для элементов, а .audio предназначается для класса со значением 'audio'

Вот как ясделал бы это

audio{
width: 100%;
}

.audio{
width:500px /* relative units are actually better so consider using rem,em or %*/
margin: 0 auto;
}