Geek asks and answers

Align html5 audio file horizontally with div

I got this simple div:

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

and the html5 audio element in the body of my page:

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

I would like the audio element (that is, the audio controls displayed to the user) to be horizontally centered in the div. Please note: I cannot specify the width attribute for the controls of the audio or audio elements (I tried, did nothing), and as a rule, I do not know the width of the audio elements (in pixels) between browsers (so I can’t adjust the width attribute in div).

Is there a way to do this, either in CSS or, alternatively, in Javascript? It will be a bonus if someone can point me to the appropriate resource on the Internet.

+3
source share
2 answers
#div-2 {
    display: table;
    margin: 0 auto;
}

, , controls , :

<audio id="a1" src="../../audio/sound_files/mystuff.ogg" controls></audio>
+8
<div align="center" id="player">
<audio controls>
<source src="name.mp3" type="audio/mpeg">
Unsupported browser!
</audio>
</div>
0

More articles:


All Articles