Vertically center image thumbnails into fix-sized div

Question

OK, I know this has been discussed to death and people got greenlit answers for their questions but none of them work for me.

What I want to do is vertically center thumbnails, which are generated dynamically or loaded via AJAX into a div with a fixed size. In my case 200*200 pixel.

Please go to this site: click here and click on for example the "Web" button. You'll see that all the thumbnails are or on top of their boxes. I really tried everything I could think of. The only option I know would work is to hard-code the image height into every thumbnail tag but this would take forever because I would need to add their dimensions into the DB.

If you are using Firebug you can easily edit everything on the site to run tests, this is how I did it mostly.

I hope someone can help me here. I really would appreciate it. Thank you very much.

Answer 1

Does this work?

<div id="outer">
    <div id="inner">
         //image goes here
    </div>
</div>

#outer {
  display:table;
}
#inner {
  display:table-cell;
  vertical-align:middle;
}

Answer 2

Unfortunately I don't know of an easy answer to this, since CSS failed to provide a true vertical alignment construct. You have two options that I am aware of (does not mean there aren't others): use absolute positioning of the img element inside div.onepic (see Method 1 in http://phrogz.net/CSS/vertical-align/index.html) OR use javascript to calculate the thumbnail Y height and set the top padding on each div.onepic to half the difference between the Y height of the img and div.onepic. Using jquery the js code is pretty easy to do.

Answer 3

Usually when I have to do this, I just don't use an <img> tag. Instead, I put that image on the background of an element with background-position: 50% 50%. Example:

HTML

<div class="onepic">
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"&gt;&lt;/a&gt;
</div>

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}

Sure, that may not be SEO-friendly or gracefully degradable (for when there's no CSS). But for that reason, you can put an <img> tag and set it to display: none, like this:

HTML

<div class="onepic">
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"&gt;
        <img src="http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg"&gt;
    </a>
</div>

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}
.thickbox img {
    display: none;
}

And there you have it. A JavaScript-free, SEO-friendly solution :-). Hope you get the concept, let me know if I need to explain anything more.

Answer 4

Another option, though not semantically correct or CSS-focused is to wrap it in a table/row and vertically align. If it's a one off on the page, and you're aware off possible accessibility issues with screen readers, then might be a quick-fix that you can address later - depends on you timescales...