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 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，{{1 }，bottom和left设置为right，并确保您在那里使用0 ...

Demo 2

margin: auto;

Answer 2

以下是css替代方案，它将音频中心设为div。

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

Answer 3

喜欢这个

<强> demo

<强> CSS

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

}

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

在div中垂直居中音频控制

3 个答案: