Question

我在这里进行了演示：DEMO

您应该能够看到滑块中显示的音频播放器。我遇到的问题是我不知道如何将音频播放器置于滑块中间。如何实现这一点，我希望这在所有浏览器中都有效：

下面是代码显示滑块和链接到音频播放器本身的iframe：

<style>
    #galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</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">

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

          </script> 

    <?php


}

我正在使用Galleria作为我的滑块，如果您想查看，可以在此处找到文档：http://galleria.io/docs/

更多信息：

我只希望滑块中的音频播放器在滑块中居中。

下面是完整的代码，如果没有音频那么它会显示一个空白，如果有一个音频然后在页面上显示单个音频播放器（这是下面的大部分代码），如果多个音频播放器然后显示为slder。这是针对每个问题，即使我没有在下面的代码片段中包含每个问题的循环：

        //start:procedure audio
        $aud_result = '';
        if(empty($arrAudioFile[$key])){
          $aud_result = '&nbsp;';
        }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><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></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><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></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) { ?>

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

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

          </script> 

    <?php

}

}
//end:procedure audio

Answer 1

您可以将margin: 0 auto添加到要居中的元素中心。

.jp-audio {
  margin: 0 auto;
}

请注意，这仅在元素是块元素且具有设置宽度时才有效。

Answer 2

应用这些样式，它应该工作

div.jp-audio {
margin: auto !important;
width: 85% !important;

}

如何将对象置于滑块中心

2 个答案: