Image alignment using CSS

[Christoph]

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

 

[Sid]

: 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>


There are inherent faults with this table.

1. The images are fixed widths, thus width=75% in table is absolutely
meaningless;
2. align in TDs are meaningless. Whether you specify align=left or
align=right, you get the same result. Try it.

Sid

 

[Spartanicus]

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?

http://homepage.ntlworld.ie/spartanicus/evenly_spaced_images.htm

 

[dorayme]

: 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>


There are inherent faults with this table.

1. The images are fixed widths, thus width=75% in table is absolutely
meaningless;

I would not say absolutely meaningless. If the browser window is
sufficiently big and the pics sufficiently small, having a width
on the table can conceivably be useful.

 

[rich]

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?.

 

[Andy Dingley]

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'.

Go and learn how to use CSS "float"

http://brainjar.com has a good article on it, under "CSS positioning"

 

[rich]

Go and learn how to use CSS "float"

http://brainjar.com has a good article on it, under "CSS positioning"

CSS float is good, but I have had trouble in the past getting an image
to float into the centre of a given area. So, maybe i dont think that
will work for this particular purpose... still, good stuff though.

 

[jojo]

There are inherent faults with this table.

1. The images are fixed widths, thus width=75% in table is absolutely
meaningless;
2. align in TDs are meaningless. Whether you specify align=left or
align=right, you get the same result. Try it.

3. There is a typo... its align="center", not "centert"