Home/ Questions/Q 6826857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:11:51+00:00

I’m trying to do an inter-fading slideshow JS. it works perfectly if all the

  • 0

I’m trying to do an inter-fading slideshow JS.

it works perfectly if all the images are in position: absolute, under the parentdiv.

Problem arises when there are images with different orientations and aspect ratios, they all stick to the upper-left corner of the parent div when I want them to align with the center (both horizontal and vertical) of thediv.

If I change them to position:relative, they would appear next to the existing image while starting to fade in because the original hasn’t faded out yet.

Any ideas are greatly appreciated.

http://jsfiddle.net/chocobo/ERH54/9/

(all credit goes to the original author: Torsten Baldes)

EDIT: Horizontal-centering is made possible, how about vertical-centering?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not suggesting this is the best way, but it works:

    Start by wrapping your images in list item elements. Add the following class to your CSS:

    .innerfade li { width: 100%; }

    Next, wrap your images within div elements and style them with text-align: center. Hopefully you should see your images aligned horizontally down the middle.

    <ul id="rotation" class="innerfade">
    <li><div style="text-align: center;"><img src="http://www.google.com/images/nav_logo95.png"></div></li>
    <li><div style="text-align: center;"><img src="http://l.yimg.com/a/images/ww/met/slimheader/yahoo-logo-sm-png8.png"></div></li>
    <li><div style="text-align: center;"><img src="http://l.yimg.com/cv/mntl/aut/11q3/img_9224c7f0.jpg"></div></li>
</ul>
    • 0