CODEWITHSUNDEEP
csshtml
thatidiotguy
thatidiotguy

Reputation: 8991

Center HTML 5 Audio Players for All Browsers

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?

Upvotes: 6

Views: 33034

Answers (6)

Sandip Nirmal
Sandip Nirmal

Reputation: 2459

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.

Upvotes: 9

shalometz
shalometz

Reputation: 89

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>

Upvotes: 4

Tiago Firmino
Tiago Firmino

Reputation: 1

<div align="center">
<audio controls src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>

or

<div align="center">
<audio controls>
<source src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>

Upvotes: -1

Jonathan
Jonathan

Reputation: 11

I was just messing around with EJ-Media's stuff on YouTube and ran into the same desire. This is no doubt a really blunt way to pull off what you are trying, maybe this:

<audio controls="audiocontrols"  style="display:block;margin:auto; text-align: center">

Upvotes: 1

StudioTime
StudioTime

Reputation: 23989

Use display: table on the audio component container, this will fit to the size of the audio component and margin: 0 auto will then center it:

<div style="margin: 0 auto; display: table;">
   <audio controls ....>
       ....
   </audio>
</div>

Upvotes: 1

Robert Morel
Robert Morel

Reputation: 13

Wrap the audio in a div:

HTML:

     <div class="container-fluid audioCenter">
            <audio controls>
                 <source src="audios/LearningToChooseYourThoughtsBreathTechnique.mov" 
                     type="audio/mpeg"></audio>
            </div>

CSS:

      .audioCenter{margin: 10px auto; width: 320px;}

Upvotes: -1

Related Questions