Горизонтальное выравнивание аудиоэлемента html5 в div

Question

Я получил этот простой div:

#div-2 {
    margin-left: auto;
    margin-right: auto;
}

и html5 аудио элемент в теле моей страницы:

<div ID="div-2">
        <audio id="a1" src="../../audio/sound_files/mystuff.ogg"></audio>
</div>

Мне бы хотелось, чтобы аудио элемент (то есть элементы управления звуком, отображаемые пользователю) был горизонтально центрирован в div. Обратите внимание, что я не могу указать атрибут ширины для элементов управления аудио или элементов аудио (я пробовал, ничего не сделал), и, как правило, я не знаю ширину элементов управления аудио (в пикселях) между браузерами (поэтому я могу не настраивайте атрибут ширины в div).

Есть ли способ сделать это либо в CSS, либо, в качестве альтернативы, в Javascript? Было бы бонусом, если бы кто-то мог указать мне на соответствующий ресурс в сети.

Answer 1

#div-2 {
    display: table;
    margin: 0 auto;
}

Кроме того, если вы используете элементы управления звуком браузера, не забудьте добавить controls к тегу, например:

<audio id="a1" src="../../audio/sound_files/mystuff.ogg" controls></audio>

Answer 2

<div align="center" id="player">
<audio controls>
<source src="name.mp3" type="audio/mpeg">
Unsupported browser!
</audio>
</div>