如何在广场滑块中居中对象答案

【问题标题】：How to center object in galleria slider如何在广场滑块中居中对象
【发布时间】：2013-02-18 10:42:09
【问题描述】：

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

以下是基本的广场风格：

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

我这里有演示应用页面：DEMO

更新：

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

<?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">

【问题讨论】：

能否请您在 jsfiddle 中显示示例？
@DebasishChowdhury 我很难制作小提琴，因为大多数都是 php 编码的，但我创建了一个演示，所以你可以看到它的样子。我希望音频播放器在滑块中居中的原因是因为滑块箭头挡住了您将无法按下播放按钮
@Manixman 请查看我的答案并尝试解决方案，如果我落后于某个地方，请告诉我。

标签： jquery css galleria

【解决方案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;
}

屏幕截图：

【讨论】：

【解决方案2】：

如果您想用于任何特定项目，请使用此，

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

希望这会奏效。

【讨论】：

我唯一的问题是我的完整应用程序如何工作是我有一个评估，评估显然包含问题，对于每个问题，如果没有音频文件，则不显示音频播放器，如果有单个 audo 文件，则在页面上显示单个音频播放器，如果有多个音频文件，则将音频播放器显示到滑块中。如果我直接更改您提到的代码，我遇到的问题是它会将页面上的单个音频播放器以及滑块中的音频播放器居中。我只希望滑块中的音频播放器居中。
好主意，但没用，我也尝试将其更改为.find("#jp_container_"+key+"-"+j)，var j = '<?php echo $j; ?>'; 但仍无法居中
您可以上传演示中的更改吗？
在您的代码中设置 J = 3，但我可以看到的 div id 是“jp_container_7-0”，所以“J”应该是 0。另外，最好尝试 $(window)。 load() 而不是 $(document).ready()。因为，$(window).load() 将在 Galleria 完成它自己的工作后完成它的工作，即创建 iframe 等。
语法错误...在您的演示页面中... $(window).load() 没有正确编写

【解决方案3】：

轻松使用 CSS（使用您现有的 ID 结构）：

#js { text-align: center; }
div.jp-audio { margin: 15px auto 0 auto; }

如果您的封闭div 的宽度发生变化，这也将保持流畅

【讨论】：

【解决方案4】：

在 http://helios.hud.ac.uk/u0867587/Mobile_app/jquery/skin/jplayer.blue.monday.css 中，更改：

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

到

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

Margin 0 auto 通常用于以“正确方式”居中元素。

【讨论】：

【解决方案5】：

在 jplayer.blue.monday.css 文件第 33 行添加 margin:0 auto; 到 div.jp-audio

【讨论】：