ClassBehaviours, the javascript framework based on class-name parsing

Table-layout has thankfully gone the way of the dodo, but how do you center unevenly sized thumbnails now?

This script uses a little javascript to compensate.

Unevenly Sized Thumbnails in a Grid

The icons below are all centered in a grid, but the individual icons are all of a different height. The "centeredThumbnails" script measured up the available space and centers the thumbnails using margins.

---

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

---

Below is the same grid without the script.

---

• 
• 
• 

---

Example Without Script

In the following example the container is displayed as a table-cell and centered using styles.

For Internet Explorer conditional comments were used to overcome Microsoft's lack of support for "display : table-cell;".

Required Files

• jQuery Addon Script: jquery.classbehaviours.centeredthumbnails.js
  • Prerequisite Script: jquery.classbehaviours.js
• Example Markup: centeredThumbnails.html
• Example Stylesheet: centeredThumbnails.css