Image Collection: alignment control

To control the alignment of images and comments in the gallery in multiple columns and rows, you must use techniques to maintain compatibility with all browsers and their older versions.

Images are listed with <li> tags, and the CSS show: inline-block property causes them to match and no longer align vertically as a list.

But in order to avoid overflow and structure changes when images or text need additional space, you need to use the resources of style sheets...

HTML code:

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

A new list is created for each line in the gallery.

CSS ID:

.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;
}

Display

Explanations

The following code defines a frame for each frame with its own text with the inline-block option, which is part of the CSS 2 specification:

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

The rest of the options are for compatibility with old browsers .

Add Frame

You can change the border property to create a border, for example:

 border:1px solid gray;

See also