SHORT VERSION
=============
I have a bunch of identical fixed-size single-celled tables that rest
against each other horizontally thanks to "float:left". These tables
are dynamically generated and the number of them can vary greatly. They
are all contained within a parent table cell, which is centred on the
page. But I am unable to find a way of centering these table cells
within the parent cell.
I basically need to be able to have fixed-size image containers stacked
horizontally (which is why I use float:left), but to have those centred
(which float:left negates).
I've tried DIVs, and the behaviour is the same. Any ideas? Thanks.
LONG VERSION
============
I am building a couple of pages for a client that need to feature a row
hyperlinked images. The pages are being generated dynamically with a
PHP script pulling data from an XML file. This way my client doesn't
need to edit HTML - editing the XML file and uploading the image will
update the site. The page in question is here:
http://www.impala.org/promoterlist.php
The three logos visible are contained within single-cell tables, with
dimensions of 135x135 pixels each. They are floated left, which is why
they are horizontally next to each other. They are themselves nested
within a table which is centred in that section of the page.
My problem is that the three floating table cells are resting against
the left margin of the parent table cell. I want it to be centred.
The dimensions are all organised so that the parent cell nicely fits
four child tables, and then the fifth wraps to the next line and
carries on. When I have multiples of four logos in there, it looks
perfect. But I want what is there to be centred.
What is the best way of acheiving this?
It is important to bear in mind that the number of logos will change
and that the page is dynamically generated, so any solution will need
to work regardless of the number of logos and the code needs to lend
itself to replication by a script (i.e. using the script to generate a
table with multiple cells will not work because each loop must only
process one image and it needs to apply the same identical code to each
image).
Two fixes I've attempted:
1) Using DIVs instead of tables - exact same problem.
2) Trying to find a way to use CSS to create an "invisible box" around
an image of a set dimension and to anchor the centre point of that
image to the centre of that box. Not found anything. This would remove
the need for any layout code.
I know an easy way would just be to ensure each image is 135x135 pixels
and forget about using tables and DIVs, but that is not a burden I want
to give to my client.
I hope I've made things clear! Any help would be greatly appreciated.
