Vertically center image thumbnails into fix-sized div

OK, I know this has been discussed to death a开发者_运维百科nd 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.

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')"></a>
</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')">
        <img src="http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg">
    </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.

Does this work?

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

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

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.

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...

It is a lot of code but works like a charm. I came up with it after reading several posts on this subject. It positions images of various sizes in een fixed width and height div

You CSS should contain this:

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

Your code should be this:

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>