jquery - 如何在画廊 slider 中居中对象

Question

我正在使用 Galleria 插件，但我想做的是将主要对象居中，即 galleria slider 内的音频播放器。但是我该怎么做呢？

下面是基本的画廊风格:

<style>
    #galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>

我在这里有演示应用程序页面:DEMO

更新:

下面是当前代码，尝试在 slider 中选择每个特定的音频播放器并将其居中:

<?php

                          $j = 0;

        ?>

    <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) { ?>

    <a href="audio.php?key=<?php echo $key; ?>&j=<?php echo $j; ?>&a=<?php echo $a; ?>"><img class="iframe" src="Images/audiothumbnail.png"></a>

    <?php $j++; ?>
    <?php } ?>
    </div><br/>

             <script type="text/javascript">

                          $(window).load(function(){
       var key = '<?php echo $key; ?>';
       var j = '<?php echo $j; ?>';
        $("#galleriaaudio_"+key)
            .find("iframe")
            .contents()
            .find("#jp_container_"+key+"-"+j)
            .attr('style', 'margin: 0 auto');
        });

                Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
                Galleria.run('#galleriaaudio_<?php echo $key; ?>');

              </script> 

Below is releavt divs belonging to each audio player which gives each audio player uniqueness:

      <div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
      <div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">

Answer 1

您可以尝试使用下面的 css 来解决问题。

CSS:

文件:http://helios.hud.ac.uk/u0867587/Mobile_app/jquery/skin/jplayer.blue.monday.css

第 33 行

div.jp-audio {
    margin: 0 auto;
    width: 420px;
}

屏幕截图: