Image gallery: how to control the layout

To control alignment of images and labels in a gallery in several columns and row, tricks must be used to maintain compatibility with all browsers, and their older versions.

The images are placed in a list with the tags <li> and the CSS display: inline-block property let them to be juxtaposed and not aligned vertically in a list.

But to avoid overflow, and the destroying of the layout when images or text require extra space, we must tap into the resources of style sheets...

HTML code: 

<ul class="gallery">
  <li><img ...><br>text</li>
  <li>...
</ul>

A new list is used for each row of the gallery.

CSS code:

.gallery li
{
  display:inline-block;
  width: 158px;
  min-height: 170px;
  vertical-align:top;
  text-align:center;
  padding:4px;
  zoom:1;
  *display: inline;
  _height: 170px;
  border:none;
}

Demonstration

Explanations

The following code defines a framework for each image with its label, with the inline-block option, which is part of CSS 2:

display:inline-block;w
idth:158px;
min-height:170px;
vertical-align:top;
text-align:center;
padding:4px;

The extra commands are for compatibility with older versions of browsers.

Adding a border

You can change the border property in option that allows creating a border, with for example:

 border:1px solid gray;

See also