I'm trying to get some thumbnail images that are displayed with
ClueTip to be centred vertically & horizontally. The images are
various sizes, though none is larger than 150px on a side, so I set
ClueTip to have a width & height of 200px.
The images are wrapped in a div so that I can have them display: none
by default, yet assign display: block to the images themselves.
div.DownloadStatsThumb { display: none; vertical-align: middle; }
img.DownloadStatsThumb { display: block; margin: auto; }
The markup looks like so:
<a href="#" rel="#thumb_456" title="">foo</a>
<div class="DownloadStatsThumb" id="thumb_456">
<img src="/path/to/some/image.jpg"
width="150" height="101" alt="thumbnail image"
class="DownloadStatsThumb" />
</div>
The images are always aligned left & top. Eventually, I figured out
that it was div#cluetip-inner that was the culprit. While the outer
div has a height and width, the inner div has display:inline-block and
so was shrinking down to the img size, essentially. I then added:
onActivate: function(e)
{
$('#cluetip-inner')
.css('display', 'block')
.css('width', '186px')
.css('height', '186px')
.css('vertical-align', 'middle')
.css('background-color', '#000');
return true;
}
The 186px is to avoid getting scrollbars and the BG color is to assure
myself that it's resizing ok. However, the images remain centred
horizontally only. Is there something else I've missed?
