Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center HTML 5 Audio Players for All Browsers

Tags:

html

css

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?

like image 702
thatidiotguy Avatar asked May 29 '13 21:05

thatidiotguy


2 Answers

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.

like image 155
Sandip Nirmal Avatar answered Sep 28 '22 06:09

Sandip Nirmal


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>
like image 45
shalometz Avatar answered Sep 28 '22 07:09

shalometz