Posted by rich on 10/09/06 23:55

Christoph wrote:
> I'm trying to get 3 images in a row aligned left, center and right. I know
> I can do this using a table simply enough but I'm trying to get it to work
> using CSS. The table solution looks something like this:
>
> <table width="75%">
> <tr>
> <td align='left'><img src='blah1.jpg'></td>
> <td align='centert'><img src='blah2.jpg'></td>
> <td align='right'><img src='blah3.jpg'></td>
> </tr>
> </table>
>
> I've tried sticking the images in DIV's whose style was set to the
> appropriate text-align, but that just makes it so that the images are on
> different 'lines'. I've tried creating classes looking something like this:
>
> .alignleft {
> text-align: left;
> }
>
> but all that did was put the images one right next to each other. As if the
> class didn't really do anything.
>
> How can I make it so that the first image is about 33% across the page from
> the left border, the second image centered and the third image about 66%
> across the page from the left border? I've done some google searches (css
> image align) but wasn't able to find anything that addressed my need. If
> someone could point me to a good tutorial or to a good resource that
> discusses this issue, that'd be great.
>
> thnx,
> Christoph

Well, i believe that it can be done in CSS, but I had to play around
with it a bit before i found the answer. The images must first be
converted to block type elements before and then you can use the margin
property to align them.
If you have the 3 images in 3 different cells of a table, how about
this:

..alignleft {
display: block;
margin-left: 0;
margin-right: auto;
}
..aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
..alignright {
display: block;
margin-left: auto;
margin-right: 0;
}

and in the code: -

<table width="75%">
<tr>
<td><img src="blah1.jpg" class="alignleft" /></td>
<td><img src="blah2.jpg" class="aligncenter" /></td>
<td><img src="blah3.jpg" class="alignright" /></td>
</tr>
</table>

This works in Firefox and IE6 at least.
Is that what you're after?. :-)

[Back to original message]