I have often needed the to fulfil the requirement of aligning an image to the middle of a specified height. In the old table based way of doing it was pretty easy. All you needed to do was valign=”middle” on the cell containing the image. Things have changed (for the better) by dropping table based layouts. Unfortunately not all browsers CSS capabilities are good enough to align to the middle very easily.
So I came up with a solution in jQuery when working on a current project’s product gallery. Solving it programatically is alot quicker than editing every image.
All you need is:
- jQuery
- A transparent GIF
- And a tiny bit of jQuery magic
All you need to do is set the maximum height and width to the image that you require. Then set its background colour (if needed) as well as a background image the same as current source at 50% (both top and left). Then finally replace the current image source with the transparent GIF revealing your newly centred and middlely (new word) aligned image.
Your code should look something like this.
$(function(){
$("img.middle_aligned").each(function(){
$(this).css("width","160px").css("height","110px").css("background","#fff url("+$(this).attr("src")+") 50% 50% no-repeat").attr("src","images/blank.gif");
});
});
If you have any other techniques let me know in the comments.
Now go and make some awesome image galleries with the aid of jQuery.
