Vertical Align Image within DIV

Question

Hi SO,

I've got a pretty minor problem that I think can be resolved by re-thinking my CSS.

On a part of a page, I've got a series of images. Initially, each image is hidden (See CSS Below). I've got it working fine. When the page loads, the first image fades in via jquery. There's a timer set up where after X seconds, the current image fades out and the next fades in.

Each image is contained in a larger DIV. The image is supposed to sitting exactly in the middle of the div (Vertically and Horizontally). Since each image could be a different size, i had to write in a bit of logic to check the height of the image and adjust its margins on-the-fly (Again, see code below). And this works fine, except for the very first image. The calculated height of the first image is always 0... which makes it appear lower than the middle of the div.

Can this same effect be acheived using vertical-alignment? So far I've been unsuccessful.

Any help is much appreciated.

Thanks

CODE

Markup

    <div id="logowrapper">
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
    </div>

CSS

#logowrapper
{
    border-right: 2px solid #DDD;
    display: block;
    position: absolute;
    top: 12px;
    left: 10px;
    text-align: center;
    width: 370px;
    height: 208px;
    background-color: #FFF;
}
.logo
{
    display: none;
}

JS

$(document).ready(function() {
    var currentLogo = 0;
    var numLogos = $(".logo").size();
    var interval = 3000; 
    var boxHeight = $("#logowrapper").height();
    function updateLogo() {
        if (currentLogo >= numLogos) {
            currentLogo = 0;
        }


        $(".logo").hide();  
        var thisLogo = $(".logo:eq(" + currentLogo + ")");
        thisLogo.fadeIn();
        var logoHeight = thisLogo.height();

        var newMargin = parseInt((boxHeight / 2), 10) - parseInt((logoHeight / 2), 10);

        thisLogo.css({ marginTop: newMargin });

        currentLogo++;

    }
    setInterval(updateLogo, interval);
    updateLogo();


});

Answer 1

I think vertical-align only works for inline elements. See this article for instance. Try changing display: block; to display: inline;

Edit: Or, if that doesn't work, set vertical-align on your image tags directly

Answer 2

Show the item, check its height and hide it again. jQuery doesn't do a good job of measuring hidden elements. It will happen so quickly the user will not see it.

Answer 3

The first image is probably not done loading when you try to get its height. The others work because by the time you get to those, they are completely loaded.

You can use the load event instead of ready to wait for the images to load. With jQuery:

$(window).load(function() {
    ...
});

I think you could use "#logowrapper" instead of window to only wait for the images inside the wrapper to load, but I've never done that.

Answer 4

Is this by any chance happening in a web-kit based browser (chrome, safari)?

If it is, you can use $(window).load(function() instead of $(document).ready(function() as the problem likely is that the height is not known because the image isn´t loaded yet.