Centro di HTML 5 Lettori Audio per Tutti i Browser

Ho provato un codice come questo:

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

ma questo non centra il lettore audio perché il div si espanderà fino ad occupare tutto lo spazio disponibile. C’è un buon modo per centrare il lettore audio su OGNI browser, senza romperla?

  • Perchè non impostare la larghezza del DIV al 100% e impostare lo stile per l’audio margin: 0 auto; e se vedere se funziona.
  • Provate questo link [Orizzontalmente allineare un elemento html5 audio in un div][1] [1]: stackoverflow.com/questions/5232480/…
  • A me non so se inline-block con text-align è 100% corretto, ma funziona. Se si posta una risposta, ho tenuto ad accettare.

 

6 Replies
  1. 1

    Utilizzare display: table sulla componente audio contenitore, si adatta alle dimensioni del componente audio e margin: 0 auto sarà quindi al centro:

    HTML:

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

  2. 1

    Ero solo smanettare con l’EJ-Media è del materiale su YouTube e ho incontrato lo stesso desiderio. Questo è senza dubbio un davvero blunt modo per tirare fuori ciò che si sta cercando, forse questo:

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

    Si può provare a utilizzare flexbox qualcosa come il seguente:

    # HTML    
    <div class='audio-container'>
       <audio controls>
       </audio>
    </div>
    
    #CSS
    .audio-container {
      display: flex;
      justify-content: center;
      align-items: center 
    }

    Puoi controllare qui https://jsbin.com/tojidar/edit?html,css,uscita

    Questo dovrebbe funzionare correttamente su tutti i browser moderni.

  4. 1

    Stile dell’elemento audio per display: block; margin 0 auto;. Nessun bisogno di un wrapper. Come questo:

    HTML:

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

  5. -1

    Avvolgere l’audio in un 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;}
    • C’è (O era) non garantisce l’utente sta utilizzando bootstrap, vorrei suggerire che è stato questo richiede di bootstrap di lavoro, come descritto in qui
  6. -1

    HTML:

    <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>

    • Il codice è sempre buona, ma aiuta anche a inserire commenti o contesto come la soluzione risolve la domanda originale.

Lascia un commento