Image galleries are usually built with floats. That's fine, but we can also use CSS table values to accomplish this task. To start with, let's draw a simple HTML structure:
<ul id="gallery"> <li> <div class="box-img"> <img src="img/1.jpg" alt="Test image" /> <p>Caption text</p> </div> <div class="box-img"> <img src="img/2.jpg" alt="Test image" /> <p>Caption text</p> </div> <div class="box-img"> <img src="img/3.jpg" alt="Test image" /> <p>Caption text</p> </div> </li> <!--more--> </ul>
And here are our CSS styles:
#gallery { width: 490px; margin: 0 auto; padding: 0; display: table; } #gallery .box-img { width: 152px; padding: 5px; border: 1px solid #cbcbcb; font-size: 1.2em; display: table-cell; } #gallery .box-img img { display: block; width: 100%; } #gallery .box-img p { text-align: center; margin: 0; padding: 4px 0; color: #666; font-variant: small-caps; } #gallery li { list-style: none; display: table-row; }
We've turned all block-level elements in table, table row and table cell elements, respectively. You can see the final result here.
Good one Gabriele,
Many thanks.
Been looking for ages for a way to have text under images in a table.
Works like a charm.
K
thanks!