Question

I have quite a bit of experience with css and even this problem has stumped me.

I am theme-ing the NextGen gallery plugin for WordPress, which means I don’t really have control over the HTML, and I have a problem trying to line up the images.

In NextGen the maximum size of images is 200px x 200px. The images are thumbnails of larger images, each with its own constraints in size and dimension but all under 200px x 200px

The main aim:
The class image is fixed width but its width changes depending on the image that is within it. The class imageBox surrounds images and has its width fixed to the maximum width of images (200px wide, 200px high). For the images that are not 200px wide I want them to line up in the center of the imageBox.

The basic HTML generated by NextGen Gallery:

<div class="imageBox">
   <div class="image">
      <img />
   </div>
</div>

My CSS so far:

.imageBox{
    width: 218px;
    height: 218px;
    float: left;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.image{
    margin-right: 5px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    display: inline-block;
}

I have used absolute positioning to ensure the images are all lined up along their bottom edge, thus the bottom:0px.

Any help would be great.

EDIT
Messed up the css, had the classes the wrong way round.

Answer 1

The solution is to give a fixed 200px width to the image class and set it with position absolute and bottom 0px. This causes it to snap to the bottom of the imageBox class while taking the full width of its container.

Since the image div is now at the bottom and the full width, all thats needed is to center the image so I applied margin 0px auto to the image > img class, centering the image and solving my problem.

This can be seen here.