中心HTML 5音頻播放器對於所有瀏覽器

我想這樣的代碼：中心HTML 5音頻播放器對於所有瀏覽器

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

但這不會居中音頻播放器，因爲格將擴展爲佔用所有可用空間。有沒有一種好方法可以將音頻播放器置於每個瀏覽器而不會打破它？

來源

2013-05-29 thatidiotguy

你爲什麼不設置DIV至100％的寬度，併爲音頻保證金風格：0汽車;如果看到是否有效。 – Si8

嘗試此連結[水平對齊在一個div一個HTML5音頻元素] [1] [1]：http://stackoverflow.com/questions/5232480/horizontally-align-an-html5-audio- element-in-a-div – liebs19

@Adrift我不知道'text-align'的'inline-block'是否100％正確，但是它可以工作。如果你發佈答案，我會接受。 – thatidiotguy

環繞音頻的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;}

來源

2016-05-20 07:08:35

有（或不）保證用戶使用引導程序，我建議你說明這需要引導程序才能正常工作，如[此處]所述（http://getbootstrap.com/css/#overview-container） – Draken

音頻組件容器上使用display: table，這將適合於音頻的大小組件和margin: 0 auto然後將它居中：

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

來源

2018-03-06 17:47:11

中心HTML 5音頻播放器對於所有瀏覽器

回答

相關問題