jQuery Mobile (jQM) grid with images and captions

For my latest course at IMEM I have been deeply involved with jQuery Mobile (jQM). The work that has been done on the framework is really¬†extraordinary. It is extremely simple to develop a quite complex mobile website in few lines of code. Along with tools such as Codiqa.com as well as Adobe’s DW CS5.5¬†development is even easier.

One thing that was not that intuitive though was developing a gride with images and captions for those images. The slightly challenging aspect was to align on the center the caption’s text as well as to properly resize and position the images.

For the following grid:

the following CSS rules are needed:

and those two produce the following result (app is developed for supporting the course):