How to centre/center html audio player to middle of webpage?

3
votes

Problem

I have been trying to centre/center my HTML audio player to be in the centre/center of my GitHub Pages static website. I have tried this in HTML and CSS. I have deleted my cache a few times to make sure that isn't the root of my problems. Chrome Browser / Mac OS 10.14.

Code Snippet 

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempts so far

Attempt #1 - create a 'center' class and apply inline

Top of code (in style tags): 

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Bottom of code: <source src="etc.mp3" type="audio/mpeg" class="center"/>

Attempt #2 - add id tag to audio player and align text to center

Top of code (in style tags) : 

#audio {
    text-align: center;
  }

Bottom of code: <source id="audio" src="etc.mp3" type="audio/mpeg"/>

Attempt #3 - add div tags around audio player and align text to center

Top of code (in style tags):

  #audio {
    text-align: center;
  }

Bottom of code: 

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #4 - vertically align text to center

Top of code (in style tags):

  #audio {
    vertical-align: center;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #5 - justify content to center

Top of code (in style tags):

#audio {
    justify-content: center;
  }

Bottom of code: 

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #6 - align self to center

Top of code (in style tags):

#audio {
    align-self: center;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #7 - display audio player as inline block

Top of code (in style tags):

  #audio {
    align-self: center;
     display: inline-block;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #8 - wrapping the audio player in a table 

  <div style="margin: 0 auto; display: table;">
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

Attempt #9 - adding an audio container class and applying it inline

Top of code (in style tags):

.audio-container {
  display: flex;
  justify-content: center;
  align-items: center 
}

Bottom of code:

  <div class='audio-container'>
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

What I haven't attempted

  • Adding so much padding that the audio player ends up in the centre/center of the page

Sources of research

  • MDN
  • A generous number of StackOverflow threads
  • W3C docs

Solution - *IMPORTANT!* Updated 13/03/2019

From Sandip Nirmal's answer in this thread - also attempt #9 after deleting cache

Top of code (in style tags):

 .audio-container {
  display: flex;
  justify-content: center;
  align-items: center 
}

Bottom of code:

  <div class="audio-container">
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>
2
htmlcsswebaudiogithub-pages

2 Answers

1
votes

Try with the css like this:

.audio{
  width:100%;
}
.audio audio{
  margin: 0 auto;
  display: table;
}

The "display: table;" is what does the trick.

0
votes

First of it should be 

audio{
:
}  or `.audio{...}`

Since #audio target IDs meanwhile audio targets elements and .audio targets class with the value 'audio'

This is how I would have done it 

audio{
width: 100%;
}

.audio{
width:500px /* relative units are actually better so consider using rem,em or %*/
margin: 0 auto;
}