Question

我试图将一组绝对元素集中在父级中。我正在使用.each来遍历以下HTML：

<div id="slider_wraped" style="display:none;">
    <ul class="slider text-center">
        <li>
            <div class="slider_info ">
                <h2>2015 AGSC</h2>
                <p>AFRICAN GEOSIENCES STUDENT CONFERENCE</p>
            </div>  
        </li>
        <li>
            <div class="slider_info ">
                <h1><i class="fa fa-flag"></i></h1>
                <h2>5</h2>
                <p>COUNTRIES</p>
            </div>
        </li>
    </ul>
</div>

这是jQuery代码：

$('ul.slider li').each(function(e)
     {
        child = $(this).children('div.slider_info');
        child_height = child.height()/2;
        child_width = child.width()/2;

        parent = child.parent().parent().parent();
        parent_height = parent.height()/2;
        parent_width = parent.width()/2;

        left = parent_width - child_width;


        child.css({'top':(parent_height-child_height-50)+'px','left':left+'px'});
     });

问题是，第一个元素位于中心，但列表中的其余项目处于非常糟糕的位置。我试过切换它们，比如让第三个项目成为第一个并且它做同样的事情。我附上了两张图片，以显示第一个元素的位置以及其余元素的差异程度。

如果有任何帮助，html是bxSlider的一部分，我使用Bootstrap作为响应式布局。

Well centered element Badly centered element

哦，背景图片是我的校园图书馆（JKUAT - 肯尼亚内罗毕）。以防你想知道:)

Answer 1

为您的div.slider_info元素提供此css属性：

div.slider_info{
    position:absolute;
    left:50%;
    top:50%;
    /* and the rest */
}

并且不要忘记检查滑块上的li元素是否具有相对位置。

将您的javasript更改为：

$('ul.bxslider li').each(function(e) {
    var $child = $(this).children('div.info');
    $child.css({'marginTop':'-'+ ($child.height() / 2) +'px','marginLeft':'-'+ ($child.width() / 2)+'px'});
});

测试:(可能有css样式问题） http://jsfiddle.net/4KYj9/

jQuery .each只能为第一项正确工作一次

1 个答案: