jquery .each为第二个到最后一个元素返回错误的高度。负高度？

Question

上周我问了这个问题并得到了一些非常负面的反馈。 我正在使用.each来获取我的页面中的类slider_info的所有div，并将它们设置在父级的中间位置。 以下是代码

$('div.slider_info').each(function(e)
     {

        child = $(this);


        child_height = child.height()/2;
        child_width = child.width()/2;

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

        left = parent_width - child_width;

        alert(child_height +" ? "+child_width); //added to show why it is not working

        child.css(
        {
        'top':parent.height()/2-child.height()/2-50+'px',
        'left':parent.width()/2-child.width()/2-50+'px'});

     });

虽然第一个div.slider信息很好地居中，但所有后续元素都没有很好地居中。事实上，他们在中心之下。

所以我试着提醒每个人的身高，看看问题是什么。 我得到了一些奇怪的东西。

第一个元素的反馈：61.5？ 447.5 - 这很好 所有其他人的反馈：-7？ -7-负值??????? ：（

我认为这就是元素失真的原因。 下面是失真的一个例子。 请帮忙

这是html

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active jkuat">
            <div class="slider_info text-center">
                <h2>2015 AGSC</h2>
                <p>AFRICAN GEOSIENCES STUDENT CONFERENCE</p>
            </div>
            <div class="carousel-caption">
                <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                </p>
            </div>
        </div><!-- End Item -->
        <div class="item aicad">
            <div class="slider_info text-center">
                <h1><i class="fa fa-flag"></i></h1>
                <h2>5</h2>
                <p>COUNTRIES</p>
            </div>
            <div class="carousel-caption">
                <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                </p>
            </div>
        </div><!-- End Item -->
        <div class="item jkuat">
            <div class="slider_info text-center">
                <h1><i class="fa fa-graduation-cap"></i></h1>
                <h2>13</h2>
                <p>UNIVERSITIES</p>
            </div>
            <div class="carousel-caption">
                <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                </p>
            </div>
        </div><!-- End Item -->
        <div class="item theatre">
            <div class="slider_info text-center">
                <h1><i class="fa fa-bank"></i></h1>
                <h2>1</h2>
                <p>CONFERENCE</p>
            </div>
            <div class="carousel-caption">
                <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                </p>
            </div>
        </div><!-- End Item -->
        <div class="item aicad">
            <div class="slider_info text-center">
                <h1><i class="fa fa-book"></i></h1>
                <h2>256</h2>
                <p>STUDENTS</p>
            </div>
            <div class="carousel-caption">
                <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                </p>
            </div>
        </div><!-- End Item -->
        <div class="item aicad">
            <div class="slider_info text-center">
                <h1><i class="fa fa-coffee"></i></h1>
                <h2>Karibu J.K.U.A.T</h2>
                <p>Juja, KENYA</p>
            </div>
            <div class="carousel-caption">
                <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                </p>
            </div>
        </div><!-- End Item -->
    </div><!-- End Carousel Inner -->
    <!-- Controls -->
    <div class="carousel-controls">
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

</div><!-- End Carousel -->