Absolute Center on Dynamic Elements

Question

So I have a rotator, which works good. However the master box is determined by the largest image. And all images (if smaller and such) should float in the center of the master box. However my margin edits don't seem to be doing anything in the code. Any ideas why they aren't applying?

    var postimgrotator = $('.postimgrotator'),
        preloader = $('#loading-images');

    postimgrotator.each(function () {

        this['tmp'] = '';
        this.tmp2 = '';
        this.postimages = new Array();
        this.cur = 0;
        this.count = 0;

        console.log($(this));

        this['postimages'] = $(this).html().trim().split(" ");
        this['count'] = this['postimages'].length;
        $(this).html("");
        for (this['cur'] = 0; this['cur'] < this['count']; this['cur']++) {
            this['tmp'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" class="postimgelm" />';
            this['tmp2'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" />';
        }
        $(this).css({
            'width': this['tmp'],
                'height': this['tmp2']
        });
        $(this).html(this['tmp'].trim());
        preloader.html(this['tmp2']);
        var width = 0,
            height = 0;
        preloader.find('img').each(function () {
            if (width < parseInt($(this).width())) {
                width = parseInt($(this).width());
            }
            if (height < parseInt($(this).height())) {
                height = parseInt($(this).height());
            }
        });
        console.log('Width: ' + width + ' Height: ' + height);
        $(this).css({
            'width': width,
            'height': height
        });
        var images = $(this).find('img');
        this['cur'] = 0;
        images.not(':first').hide();
        images.first().css({
            'marginTop': '-' + parseInt(images.first().height()),
             'marginLeft': '-' + parseInt(images.first().width())
        });
        var imgcur = 0,
            count = this['count'];

        this.imgrotate = setInterval(imgrotator, 5000);

        function imgrotator() {
            console.log(parseInt(images.eq(imgcur).height()));
            images.eq(imgcur).css({
                'marginTop': '-' + parseInt(images.eq(imgcur).height()),
                'marginLeft': '-' + parseInt(images.eq(imgcur).width())
            });
            console.log(images.eq(imgcur));
            images.eq(imgcur).fadeOut(300, function () {
                imgcur += 1;
                if (imgcur === count) {
                    imgcur = 0;
                }
                images.eq(imgcur).fadeIn('slow');

            });

        }

    });

#loading-images {
    position:absolute;
    top:0;
    left:-9999px;
}
.postimgrotator {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    margin: 10px;
}
.postimgrotator img {
    position: absolute;
    top: 50%;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div id="loading-images"></div>

[**Centering - the complete guide**](http://css-tricks.com/centering-css-complete-guide/) Note - `top:50%, left:50%` doesn't center...it puts the top left corner at the center. — Paulie_D, Oct 30 '14 at 20:04
@Paulie_D Please see the code... jQuery is the issue at hand........ I have tried top/bottom with a `'calc(50% - '+parseInt(images.eq(imgcur).height())+')'` to no avail as well. — WAS, Oct 30 '14 at 20:09
You are positioning the image incorrectly in the first place...perhaps Jquery **isn't** the issue. — Paulie_D, Oct 30 '14 at 20:11
You don't seem to understand the method used here... You can apply top/left at 50% and then minus the width/height to work towards your actual center. Problem is jquery is not applying the CSS edits at all. I also noted I used calc() on top/left only without margining. Again, jQuery is not applying the style changes. — WAS, Oct 30 '14 at 20:13
See the answer below. The positioning was off. Fixed with a CSS transform. — Paulie_D, Oct 30 '14 at 20:18

score 1 · Accepted Answer · answered Oct 30 '14 at 20:17

Does this help?

    var postimgrotator = $('.postimgrotator'),
        preloader = $('#loading-images');

    postimgrotator.each(function () {

        this['tmp'] = '';
        this.tmp2 = '';
        this.postimages = new Array();
        this.cur = 0;
        this.count = 0;

        console.log($(this));

        this['postimages'] = $(this).html().trim().split(" ");
        this['count'] = this['postimages'].length;
        $(this).html("");
        for (this['cur'] = 0; this['cur'] < this['count']; this['cur']++) {
            this['tmp'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" class="postimgelm" />';
            this['tmp2'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" />';
        }
        $(this).css({
            'width': this['tmp'],
                'height': this['tmp2']
        });
        $(this).html(this['tmp'].trim());
        preloader.html(this['tmp2']);
        var width = 0,
            height = 0;
        preloader.find('img').each(function () {
            if (width < parseInt($(this).width())) {
                width = parseInt($(this).width());
            }
            if (height < parseInt($(this).height())) {
                height = parseInt($(this).height());
            }
        });
        console.log('Width: ' + width + ' Height: ' + height);
        $(this).css({
            'width': width,
            'height': height
        });
        var images = $(this).find('img');
        this['cur'] = 0;
        images.not(':first').hide();
        images.first().css({
            'marginTop': '-' + parseInt(images.first().height()),
             'marginLeft': '-' + parseInt(images.first().width())
        });
        var imgcur = 0,
            count = this['count'];

        this.imgrotate = setInterval(imgrotator, 5000);

        function imgrotator() {
            console.log(parseInt(images.eq(imgcur).height()));
            images.eq(imgcur).css({
                'marginTop': '-' + parseInt(images.eq(imgcur).height()),
                'marginLeft': '-' + parseInt(images.eq(imgcur).width())
            });
            console.log(images.eq(imgcur));
            images.eq(imgcur).fadeOut(300, function () {
                imgcur += 1;
                if (imgcur === count) {
                    imgcur = 0;
                }
                images.eq(imgcur).fadeIn('slow');

            });

        }

    });

#loading-images {
    position:absolute;
    top:0;
    left:-9999px;
}
.postimgrotator {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    margin: 10px;
}
.postimgrotator img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%); /* this */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div id="loading-images"></div>

**Boom**! That's it. Thank you for your help, Paulie_D. I did not know about the transform method. How compatible is it compared to just minusing the edges or using `calc()` to minus half the width? — WAS, Oct 30 '14 at 20:20

Absolute Center on Dynamic Elements

1 Answers1