#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11

    css alignment problem (re: divs)


    OK, I've got this page currently:
    http://www.brianellisrules.com/stickers/pics/ (click on a state)

    I'm trying to add a caption to each thumbnail showing the date:
    http://www.brianellisrules.com/stick.../testindex.php
    (click on a state, preferably NY or NJ since they have a lot of pics)


    In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row).

    In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice.

    How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)?

    Thanks!

    oh yeah, here's the CSS:
    div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/
    div.float { float: left; text-align: center; }
    div.float p { text-align: center; margin: 0; font-size: 0.8em; }
  2. #2
  3. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    I think you can do...
    [code]
    div.thumbrow
    {
    clear: both;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    }

    [edit] Oh yeah, the second question... you can't actually vertically align stuf inside a <div>...

    What you could do is create a table with the prev arrow in the first <td>, the pics in the second, and the next arrow in the third, all with valign="middle" attributes... That should work...
    Last edited by ChiefWigs1982; February 4th, 2004 at 10:25 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11
    Thanks for the response.


    I tried the setting "margin-left: auto", but that doesn't appear to have worked. Everything is left-aligned.

    Also, I had a bad feeling that it wasn't possible to vertically align within a div. Hmmm... maybe I'll have to come up with a creative way around it...
  6. #4
  7. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    Like I said, the easiest way to do this would be with tables, using both valign="middle" and align="center" in the <td> tags, having a seperate one for each image/caption...

IMN logo majestic logo threadwatch logo seochat tools logo