html - 在 div 中垂直居中音频控制

Question

我想将音频控件在其 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

Answer 1

您必须将 div 包装在包装元素内，然后使用 display: table; 并制作内部 div 显示:表格单元格；并使用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;
}

此外，避免内联样式，而使用类和ids代替

---

实现此目的的另一种方法是使用 CSS 定位技术，将父元素设置为 position:relative;，然后将子元素设置为 position:absolute; code> 其中 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;
}