photo gallery layout

using unordered list

[Setek]

Heheheh :)

Hi, I've got a photo gallery layout in an unordered list, which displays an image that has a maximum width or height of 150px (whichever is the larger dimension), and is encapsulated in a

p

of fixed width and height, with a

p

below as the caption.

What I wanted is,

margin: auto;

style on the image inside the fixed width and height

p

, so it is vertically and horizontally aligned, dependent on how tall/wide the image actually ends up being.

So far, I haven't had much luck with vertical alignment... can anybody think of a solution, or a confirmation of impossibility? :)

[ytswy]

I've just come accross this:
[w3.org...]

Which seems to suggest if you add display: table-cell; to a container you can get vertical-align: middle; to work. Not actually tried it myself though..

[encyclo]

Without wishing to sound like a heretic, why not use a table? :)

Using an unordered list is useful when dealing with a flexible-width design, but if you know the number of images you want on each row, then using a table with centered table cells is by far the easiest and most consistent approach.

[ytswy]

Without wishing to sound like a heretic, why not use a table? :)

There are three reasons I can think of that make the list solution more apropriate for some situations:

1.(as mentioned) You need to vary the number of columns based on the page width.

2. Assuming there is no tabular nature to the data (ie row and column position are arbitary) a list is more semantic, and much easier to maintain - just stick an item where you want it, without having to mess around with the rest of the table.

3. Lists are cool ;)