JS使用不同的填充

我的网站有问题。div class="行幻灯片内容"的填充顶部表现得很奇怪。对于某些幻灯片，它约为 223px，而对于其他幻灯片，它使用不同的填充。

.PHP

<div class="home-slider">
            <ul class="slides">
                <?php while ($slide =& $loop->next()): ?>
                    <li>
                        <div class="row slide-content">
                            <div class="large-10 large-centered columns text-center">                                                             
                                                      <?php if ( ! empty( $slide->button ) ) : ?>

                                        <div class="SLIDERLOGO"><?php echo $slide->button; ?> </div>

                                <?php endif; ?>

                                <?php if ( ! empty( $slide->ititle ) || ! empty( $slide->caption ) ) : ?>
                                    <div class="hero-title">
                                        <div class="large-3 columns nopad border-bottom"></div>
                                        <div class="large-6 columns text-center">
                                            <?php if ( ! empty( $slide->ititle ) ) : ?>
                                                <h4 class="text-white alt-h"><?php echo $slide->ititle; ?></h4>
                                            <?php endif; ?>
                                        </div>
                                        <?php if ( empty( $slide->ititle ) ) : ?>
                                                <div class="large-6 columns nopad border-bottom"></div>
                                        <?php endif; ?>
                                        <div class="large-3 columns nopad border-bottom"></div>
                                        <h1 class="text-white"><?php echo $slide->caption; ?></h1>
                                    </div><!--end of hero title-->
                                <?php endif; ?>

                            </div>
                        </div>
                        <img class="slider-bg" alt="<?php echo esc_attr( $slide->alt ); ?>" src="<?php echo esc_attr( $slide->img ); ?>" />
                    </li>
                <?php endwhile; ?>

            </ul>
        </div><!--end of Home slider-->

徽标插入此处

<?php echo $slide->button; ?>

两个徽标的尺寸完全相同

.JS将 HTML 作为幻灯片的 CSS 背景追加 同时将幻灯片的内容居中

jQuery('.home-slider .slides li').each(function () {
    var imgSrc = jQuery(this).children('.slider-bg').attr('src');
    jQuery(this).css('background', 'url("' + imgSrc + '")');
    jQuery(this).children('.slider-bg').remove();
    var slideHeight = jQuery(this).height();
    var contentHeight = jQuery(this).children('.slide-content').height();
    var padTop = (slideHeight / 2) - (contentHeight / 2);
    jQuery(this).children('.slide-content').css('padding-top', padTop);
});

这是指向我网站的链接http://timberlife.nl

它不会每次都发生，但有时徽标和页面顶部之间的填充会发生变化。我希望我已经解释了足够:)

非常感谢！大安