How to center object in a slider - html

Question

I have a demonstation here: DEMO
You should be able to see audio players displayed in a slider. The issue I am having is that I do not know how to center the audio player into the middle of slider. How can this be acheived and I want this working in all browsers:
Below is code displaying slider and an iframe which links to the audio player itself:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
I am using Galleria as my slider and documentation could be found here if you want to see: http://galleria.io/docs/
MORE INFORMATION:
I only want audio players in the slider to be centred in the slider.
Below is full code where if there is no audio then it displays a blank, if there is one audio then display single audio player on page (that is most of the code below), if multiple audio players then display in slder. This is for each questions even though I have not included the loop for each question in code snippet below:
//start:procedure audio
$aud_result = '';
if(empty($arrAudioFile[$key])){
$aud_result = ' ';
}else{
$j = 0;
if(count($arrAudioFile[$key]) == 1){
foreach ($arrAudioFile[$key] as $a) {
$info = pathinfo('AudioFiles/'.$a);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
$(this).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
},
cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
});
</script>
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
<?php
}
}else if(count($arrAudioFile[$key]) > 1){
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
}
//end:procedure audio

Answer 1

You can center by adding margin: 0 auto to the element you want to center.
.jp-audio {
margin: 0 auto;
}
Please note that this only works if the element is a block element and has a set width.

Answer 2

Apply these styles, It should work
div.jp-audio {
margin: auto !important;
width: 85% !important;
}