Question

我正在尝试将div与中心spinner居中，它们都在<li>个标签内。

我想要居中的div包含使用spin.js的动画加载器。

我似乎无法使样式top: -50%正常工作，但如果我使用firebug并删除样式并再次添加它似乎可以正常工作。

希望有人可以看到我出错了。

EDITED

Flexslider将创建需要居中的div。

以下是一个工作示例。

<!DOCTYPE html>
<html lang="en">
<head>
        <meta content="charset=utf-8">
        <title>Gallery</title>
        <link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" type="text/css" media="screen" />

        <style type="text/css">
            body {
                    background-color: #222222;
                    margin-top: 20px;
                    margin-bottom: 20px;
            }
            .copyright {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    color: #999;
            }
            a {
                    font-size: 12px;
                    color: #999;
            }

            .flexslider .slides il {
                    margin-right: 10px;
            }

            #gallery_wrap {
                    margin-left: auto; 
                    margin-right: auto; 
                    width: 713px;
            }

            #slider, #carousel {
                    background-color: #000000; 
                    border: 4px solid #000000;                  
            }

            #slider {
                    margin-bottom: 10px;
            }

            #slideshow_controls {
                    margin-left: 5px;
                    margin-bottom: 5px;
            }

            #carousel img {
                height: 70px;
            }

            #slider img {
                max-width: 713px;
                max-height: 550px;

            }

            #carousel_wrap {
                    width: 713px;
            }

            #carousel .slides > li {
                margin-right: 5px;
                cursor: pointer;
            }

            #slideshow_controls img {
                    width: 40px;
                    height: 40px;
                    cursor: pointer;
            }

            .spinner {
                position: fixed;
                top: -50%;
                left: 50%;
            }
        </style>

</head>
<body>
    <div id="gallery_wrap">
    <div id="slider" class="flexslider">
        <ul class="slides">
          <li>
            <img src="http://ichef.bbci.co.uk/naturelibrary/images/ic/credit/640x395/l/la/lake/lake_1.jpg" />
          </li>

          <li>
            <img src="http://aspiringbackpacker.com/wp-content/uploads/2012/10/plitvice1.jpg" />
          </li>
        </ul>
      </div>

      <div id="slideshow_controls"><img title="Play slide show" src="./images/play_white_btn.png" /></div>

        <div id="carousel_wrap">
      <div id="carousel" class="flexslider">
        <ul class="slides">
          <li>
            <img src="http://ichef.bbci.co.uk/naturelibrary/images/ic/credit/640x395/l/la/lake/lake_1.jpg" />
          </li>

          <li>
            <img src="http://aspiringbackpacker.com/wp-content/uploads/2012/10/plitvice1.jpg" />
          </li>
        </ul>
      </div>

    </div>
</div>

  <!-- jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <!-- FlexSlider -->
  <script defer src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>

  <!-- Spin.js -->
  <script src="http://fgnass.github.io/spin.js/dist/spin.js"></script>
  <!--<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>-->


  <script type="text/javascript">

    $(window).load(function(){

        var opts = {
                    lines: 11, // The number of lines to draw
                    length: 20, // The length of each line
                    width: 10, // The line thickness
                    radius: 18, // The radius of the inner circle
                    corners: 1, // Corner roundness (0..1)
                    rotate: 0, // The rotation offset
                    direction: 1, // 1: clockwise, -1: counterclockwise
                    color: '#FFF', // #rgb or #rrggbb
                    speed: 1, // Rounds per second
                    trail: 60, // Afterglow percentage
                    shadow: false, // Whether to render a shadow
                    hwaccel: false, // Whether to use hardware acceleration
                    className: 'spinner', // The CSS class to assign to the spinner
                    zIndex: 2e9, // The z-index (defaults to 2000000000)
                    top: '100', // Top position relative to parent in px
                    left: 'auto' // Left position relative to parent in px
            };

            var spinner = new Spinner(opts).spin();
            $('#slider li').append(spinner.el);

      var opts2 = {
            lines: 11, // The number of lines to draw
            length: 10, // The length of each line
            width: 5, // The line thickness
            radius: 10, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            rotate: 0, // The rotation offset
            direction: 1, // 1: clockwise, -1: counterclockwise
            color: '#FFF', // #rgb or #rrggbb
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: false, // Whether to use hardware acceleration
            className: 'spinner', // The CSS class to assign to the spinner
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            top: 'auto', // Top position relative to parent in px
            left: 'auto' // Left position relative to parent in px
      };

      var spinner2 = new Spinner(opts2).spin();
      $('#carousel li').append(spinner2.el);

      $('#carousel').flexslider(
      {
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 114,
            itemMargin: 5,
            asNavFor: '#slider'
      });

      $('#slider').flexslider(
      {
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
      });

    });

  </script>


</body>
</html>

任何帮助都会很棒。

Answer 1

的 jsBin Demo With Code 的

的 jsBin Demo With No Code 的

问题是你的微调器类需要绝对定位，并且要居中，需要保持50％左右，其父元素占50％。除此之外，父元素需要相对定位。为了解决这个问题，需要对css进行更改：

.spinner { left:50%; top:50%; } .slides li { position:relative; }

还有初始化选项

zIndex: 2e9, // The z-index (defaults to 2000000000) /*top: 'auto', // Top position relative to parent in px left: 'auto', // Left position relative to parent in px,*/ position: 'absolute'

中心<div>垂直和水平问题</div>

1 个答案: