html - 在div中,垂直居中音频控件

  显示原文与译文双语对照的内容

我想将音频控件垂直中心放置在它的div 中,但还没有成功地执行以下操作:


<div style="height: 370px; border: 1px solid #c0c0c0; text-align: center;">
 <audio controls>
 <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"/>
 </audio>
</div>

示范

时间: 作者:

你必须将 div inside 包装成包装元素,而不是使用 display: table;,并使你的内部 divdisplay: table-cell; 和使用 vertical-align: middle;

示范


.wrapper {
 display: table;
 width: 100%;
 height: 370px; 
 border: 1px solid #c0c0c0; 
}

.holder {
 text-align: center;
 display: table-cell; 
 vertical-align: middle;
}

同时,避免使用 inline 样式,使用类和 id


你还可以使用CSS定位技术,将父元素设置为 position: relative;,而不是将子元素设置为,并将子元素设置为,并确定你在那里使用。

演示 2


.wrapper {
 height: 370px;
 border: 1px solid #c0c0c0; 
 text-align: center; 
 position: relative;
}

.wrapper audio {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
}

作者:

像这样

演示

CSS


#wrapper {
 display: table;
 height: 370px;
 width: 370px;
 border: 1px solid #c0c0c0;

}

#cell {
 display: table-cell;
 vertical-align: middle;
 text-align:center;
}

作者:

下面是一个 css 选项,它使音频中心成为 div 。


audio{
position:relative;
top:calc(50% - 30px)//30px is the height of the audio element.
}

作者:
...