Hello all,
I'm trying to build an image gallery with pictures of different widths. Those images are put into divs which float left, and thus create a band of images neatly aligned to each other. Each image should have a centered caption text beneath it.
The way I did it and how it worked in Moz and IE on Windows, was this:
CSS:
HTML:
However, this does not work on IE5 Mac. It seems as if the text-align rule causes the div to not float anymore and become an ordinary block element. I could recreate the same visual effect by using a table instead:
This wil work in IE on Windows as well as on Mac. But resorting to use a table for a simple visual effect seems quite redundant to me, not to mention the increased code size that will be generated. Semantically... you can guess the rest.
So here's my question: Is there any possibility to center text in a floated block element whose width is not known that works in IE5 Mac, but without using the table? Thanks in advance.
I'm trying to build an image gallery with pictures of different widths. Those images are put into divs which float left, and thus create a band of images neatly aligned to each other. Each image should have a centered caption text beneath it.
The way I did it and how it worked in Moz and IE on Windows, was this:
CSS:
Code:
.floater { float : left; } .floater div { text-align : center; }
Code:
<div style="width: 500px;"> <div class="floater"> <img src="storage/c/11-C-0001-R-1-thumb.jpg" /> <div>test</div> </div> <div class="floater"> <img src="storage/v/31-V-0021-X-0-thumb.jpg" /> <div>test</div> </div> </div>
Code:
<div style="width:500px;"> <div class="floater"> <table style="border:0px;padding:0px;" cellpadding="0" cellspacing="0"> <tr> <td><img src="storage/c/11-C-0001-R-1-thumb.jpg" /></td> </tr> <tr> <td style="text-align:center;">test</td> </tr> </table> </div> <div class="floater"> <table style="border:0px;padding:0px;" cellpadding="0" cellspacing="0"> <tr> <td><img src="storage/v/31-V-0021-X-0-thumb.jpg" /></td> </tr> <tr> <td style="text-align:center;">test</td> </tr> </table> </div> </div>
So here's my question: Is there any possibility to center text in a floated block element whose width is not known that works in IE5 Mac, but without using the table? Thanks in advance.
Comment