jquery - 中心
縦と横の問題

Question

div を class の中央に配置しようとしてspinnerいますが、それらはすべて<li>タグ内にあります。

中央に配置しようとしている div には、spin.js を使用したアニメーション化されたローダーが含まれています。

top: -50%スタイルが正しく機能するようには見えませんが、firebug を使用してスタイルを削除し、再度追加すると機能するようです。

うまくいけば、私が間違っていることを誰かが見ることができます。

編集済み

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>

どんな助けでも素晴らしいでしょう。

score 0 · Accepted Answer

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'

jquery - 中心縦と横の問題

1 に答える 1

Related

Reference

jquery - 中心
縦と横の問題