Aligning the audio player in the center

So I spent some time trying to figure out how to align the audio player in the Relax section to the center responsively – so that no matter what size the device is, the player will always be aligned in the middle.

At the beginning, I used Firefox’s Firebug extension so I could pinpoint what the element was so I could properly target it. As it was an <audio> element, I was trying to add CSS to that – however, from looking at Firebug, I should’ve been targeting <canvas> element, which is a JavaScript element, one I’ve never used before. So I decided to change the CSS of the Canvas element instead, and this time it actually moved, unlike before.

firebug.png

It took some experimenting with different CSS code to finally get it to work. I tried changing the margin, padding, and positioning. I got it to work (sorta) when I positioned it absolutely, but there was a slight problem.

center.PNG

The absolute positioning made the element go on top of everything else, and not in the correct flow.

I didn’t really know how to fix this, so I tried some different methods. What I had never thought of doing before was to actually search how to center the canvas element. I did that, and I find code that worked! All I had to do was display it as a block, have the margin auto and padding at 0… that’s it! Such simple code for something that took me ages to figure out. Now it’s aligned in the middle responsively!

center1.PNG

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s