I tried code like this:
<div style="margin: 0 auto;">
<audio controls ....>
....
</audio>
</div>
but this will not center the audio player because the div will expand to take up all available space. Is there a good way to center the audio player on EVERY browser without breaking it?
Try using flexbox
with something like the following:
# HTML
<div class='audio-container'>
<audio controls>
</audio>
</div>
#CSS
.audio-container {
display: flex;
justify-content: center;
align-items: center;
}
You can check it here https://jsbin.com/tojidar/edit?html,css,output
This should work fine on all the modern browsers.
Style the audio element to display: block; margin 0 auto;
. No need for a wrapper. Like this:
<div>
<audio controls style="margin: 0 auto; display: block;"></audio>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With