我想将音频控件垂直置于其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;,其中topbottomleftright是设置为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/

10-12 12:26
查看更多