我想将音频控件垂直置于其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>
Demo
最佳答案
您必须将div
包装在包装元素中,然后使用display: table;
并使其内部成为div
display: table-cell;
并使用vertical-align: middle;
Demo
.wrapper {
display: table;
width: 100%;
height: 370px;
border: 1px solid #c0c0c0;
}
.holder {
text-align: center;
display: table-cell;
vertical-align: middle;
}
另外,请避免使用内联样式,而应使用类和ID
实现此目的的另一种方法是使用CSS定位技术,将父元素设置为
position: relative;
,然后将子元素设置为position: absolute;
,其中top
,bottom
,left
和right
是设置为0
并确保在那里使用margin: auto;
...Demo 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;
}
关于html - 在div中垂直居中控制音频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21155772/