Vertical image alignment in DIV

Question

I have a small problem that, in my opinion, can be solved by rethinking my CSS.

On part of the page I have a series of images. Initially, each image is hidden (see below). I am fine. When the page loads, the first image disappears through jquery. A timer is set there, where after X seconds the current image disappears, and the next disappears.

Each image is contained in a larger div. It is assumed that the image is exactly in the middle of the div (vertically and horizontally). Since each image can have a different size, I had to write some logic to check the height of the image and adjust its fields on the fly (Again, see the code below). And it works great, except for the very first image. The calculated height of the first image is always 0 ..., which makes it lower than the middle of the div.

Is it possible to achieve the same effect using vertical alignment? So far, I have not been successful.

Any help is greatly appreciated.

thanks

THE 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

The first image may not be executed when loading, when you try to get its height. Others work because by the time you get to them, they are fully loaded.

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

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

I think you could use "#logowrapper" instead of window only to load images inside the wrapper, but I never did.

Answer 2

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

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

Answer 3

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

Answer 4

Does this happen by chance in a browser based on a web set (chrome, safari)?

If so, you can use $(window).load(function() instead of $(document).ready(function() , since the problem is that the height is unknown, since the image has not yet been loaded.

Answer 5

The vertical image of the line c in the div works on chrome and safari.

Properties:

 <div class="image-wrap"> <img src="xyz.png"/> </div> .image-wrap { display:table-cell; width:400px; vertical-align:middle; }