Question

I’m using the following gallery plugin on a website. http://www.twospy.com/galleriffic/example-2.html

Notice that images vertically align to the middle. The div containing images has a vertical align property and line height set to the dimension of the div’s height. Unfortunately images don’t align to the middle in older browsers like AOL..

What css can I use to make alignment happen?

Answer 1

There are many techniques to make vertical centering happen, with various levels of compatability. The first two Google results give some good techniques:

• Understanding vertical-align, or “How (Not) to Vertically Center Content”
• Vertical centering using CSS

One that might work well for you is the absolute positioning technique. It depends on you knowing the image height exactly, but for an image gallery you probably will be displaying all images at the same height. Essentially:

.img-container {
    position: relative;
}

.img-container img {
    height: 400px;      /* up to you what the correct height is */
    margin-top: -200px; /* put here 1/2 of the image height from above */
    position: absolute;
    top: 50%;
}

for markup something like

<div class="img-container">
    <img src="whatever.jpg" />
</div>