CODEWITHSUNDEEP
htmlcsscss-position
Johann
Johann

Reputation: 29877

Center audio control vertically in div

I want to center the audio control vertically in its div but have not been successfully able to:

<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

Upvotes: 2

Views: 4999

Answers (3)

Green Wizard
Green Wizard

Reputation: 3667

The following is a css alternative which makes the audio center to the div. 

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

Upvotes: 2

Falguni Panchal
Falguni Panchal

Reputation: 8981

LIke this

demo

css

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

}

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

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157364

You will have to wrap the div inside a wrapper element and than use display: table; and make your inner div display: table-cell; and use 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;
}

Also, avoid inline styles, use classes and ids instead

Other way you can achieve this is by using CSS Positioning techniques where we set the parent element to position: relative; and than we set the child element to position: absolute; where top, bottom, left and right are set to 0 and also make sure you use margin: auto; there...

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;
}

Upvotes: 2

Related Questions