Center-aligned picture blocks with captions

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	to rework the previous solution to allow center alignment.

Using inline-block value for the display property makes the code considerably simpler, yet we need to keep in mind that this value is supported only by the recent versions of the browsers.

How it looks in the browser

Mandership by Artemy Lebedev, Second Edition

Optosystems ophthalmologic excimer laser apparatus

Folderix flash drive

Ptolemy’s Map by Herz Frank

Ancor website 2.0

Rigroup website

Day of the Dragon by Vadim Panov

Grain Holding corporate identity

<style type="text/css">
.thumbnails
{
/* Compensating indents between float blocks to&nbsp;allow them to&nbsp;take all available space */
margin: -3em 0 0 -2em;

/* Center alignment */
text-align: center;
}

.thumbnail
{
/* Removing underlining of&nbsp;the ins element which was used for compatibility with older&nbsp;IE versions */
text-decoration: none;

/* This rule is&nbsp;for Firefox 2 */
display: -moz-inline-box;

/* and this one is&nbsp;for everything else */
display: inline-block;

vertical-align: top;

/* Removing center alignment */
text-align: left;

/* Indents between blocks */
margin: 3em 0 0 2em;
}

.thumbnail .r
{
/* If&nbsp;needed, it&rsquo;s better to&nbsp;set the relative value to&nbsp;the padding, border, background and position properties in&nbsp;this element, it&nbsp;will slightly increase the number of&nbsp;supported browsers. */

/* Setting the minimal text width */
width: 14em;

/* The minimal width in&nbsp;pictures will be&nbsp;calculated automatically based on&nbsp;picture width */
float: left;
}
</style>
<div class="thumbnails">
    <ins class="thumbnail">
        <div class="r">
            /everything/izdal/kovodstvo2/"><img src="//img.artlebedev.ru/everything/izdal/kovodstvo2/izdal-kovodstvo2-anon.jpg" alt="Mandership. Second Edition" /></a><br />
            /everything/izdal/kovodstvo2/">Mandership</a> by&nbsp;Artemy Lebedev, Second Edition
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/optosystems/"><img src="/everything/optosystems/optosystems-anon.jpg" alt="Optosystems" /></a><br />
            Optosystems /everything/optosystems/">ophthalmologic excimer laser apparatus</a>
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/folderix/"><img src="/everything/folderix/folderix-anon.jpg" alt="Folderix" /></a><br />
            /everything/folderix/">Folderix</a> flash drive
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/izdal/karta-ptolemeya/"><img src="http://www.artlebedev.ru/everything/izdal/karta-ptolemeya/izdal-karta-ptolemeya-anon.jpg" alt="Ptolemy's Map" /></a><br />
            /everything/izdal/karta-ptolemeya/">Ptolemy&rsquo;s Map</a> by&nbsp;Herz Frank
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/ancor/site2/"><img src="/everything/ancor/site2/ancor-anon.jpg" alt="Ancor 2.0" /></a><br />
            /everything/ancor/site2/">Ancor website 2.0</a>
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/rigroup/"><img src="/everything/rigroup/rigroup-anon.jpg" alt="Rigroup" /></a><br />
            /everything/rigroup/">Rigroup</a> website
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/eksmo/panov-dragon-day/"><img src="/everything/eksmo/panov-dragon-day/panov-dragon-day-anon.jpg" alt="Day of the Dragon" /></a><br />
            /everything/eksmo/panov-dragon-day/">Day of&nbsp;the Dragon</a> by&nbsp;Vadim Panov
        </div>
    </ins>
    <ins class="thumbnail">
        <div class="r">
            /everything/grain-holding/identity/"><img src="/everything/grain-holding/identity/grain-anon.jpg" alt="Grain Holding" /></a><br />
            /everything/grain-holding/identity/">Grain Holding</a> corporate identity
        </div>
    </ins>
</div>

Order a design...

Center-aligned picture blocks with captions March 30, 2009

How it looks in the browser