Image alignment using CSS

Discussion in 'HTML' started by Christoph, Oct 10, 2006.

  1. Christoph

    Christoph Guest

    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
    Christoph, Oct 10, 2006
    #1
    1. Advertising

  2. Christoph

    Sid Guest

    On Mon, 9 Oct 2006 19:14:57 -0400, "Christoph" <>
    wrote:

    : 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
    Sid, Oct 10, 2006
    #2
    1. Advertising

  3. Christoph

    Spartanicus Guest

    Spartanicus, Oct 10, 2006
    #3
  4. Christoph

    dorayme Guest

    In article <>,
    Sid <> wrote:

    > On Mon, 9 Oct 2006 19:14:57 -0400, "Christoph" <>
    > wrote:
    >
    > : 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.

    --
    dorayme
    dorayme, Oct 10, 2006
    #4
  5. Christoph

    rich Guest

    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?. :)
    rich, Oct 10, 2006
    #5
  6. Christoph

    Andy Dingley Guest

    Christoph wrote:

    > 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"
    Andy Dingley, Oct 10, 2006
    #6
  7. Christoph

    rich Guest

    Andy Dingley wrote:
    > Christoph wrote:
    >
    > > 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"


    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.
    rich, Oct 10, 2006
    #7
  8. Christoph

    jojo Guest

    Sid wrote:

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


    3. There is a typo... its align="center", not "centert"
    jojo, Oct 10, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kelwin Delaunay

    img alignment in xhtml strict and css

    Kelwin Delaunay, Apr 17, 2004, in forum: HTML
    Replies:
    4
    Views:
    10,830
    Kelwin Delaunay
    Apr 17, 2004
  2. rfq
    Replies:
    3
    Views:
    531
  3. Becky Lash
    Replies:
    12
    Views:
    665
    Becky Lash
    Nov 24, 2004
  4. tshad

    Question on CSS alignment

    tshad, Jan 31, 2005, in forum: HTML
    Replies:
    22
    Views:
    897
    Beauregard T. Shagnasty
    Feb 1, 2005
  5. Xah Lee
    Replies:
    1
    Views:
    405
    Johannes Koch
    Jul 7, 2005
Loading...

Share This Page