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

    Join Date
    Dec 2003
    Posts
    85
    Rep Power
    11

    Exclamation CSS Vertical Align Question


    I have a div with this ID:

    #sml_image_container {
    margin: 2px;
    padding: 2px;
    height: 70px;
    width: 70px;
    border: 1px dashed #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    font-weight: bold;
    vertical-align: middle;
    }

    I'd like to have a div work like a cell in a table that is 70px by 70px - with the text centered both horiz. and vert.. But I can't get it. Is the above the correct use of the "vertical-align"?

    I need the CSS equivilent to <td align="center" valign="middle"> in a DIV.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11
    vertical-align applies only to table cells.


    can you show us an example of what you have and what you're trying to do and maybe we can come up with a work-around?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    85
    Rep Power
    11
    I think. I have a div. It is 70px by 70px. With the above styling. Inside of the DIV will either be a picture (also 70 by 70) or the text "No Image Available" depending on what the PHP programming finds. So, with the above CSS I get the text inside the div, and looking the way I want it, except for vertical alignment. I need it to be centered.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    30
    Rep Power
    11
    Since you're using PHP to write the contents of the 70x70 div, you could make it write the text inside a paragraph with a big top margin:

    <p style="margin-top:30px;">No Image Available</p>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    85
    Rep Power
    11
    Yeah i thought about that. But for some reason it wasn't working. i was using a <SPAN> instead of a paragraph. Does the "margin-top" style accept something like "margin-top:50%" ??
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    30
    Rep Power
    11
    It should do. Keep experimenting with stuff, I'm sure you're on the right track.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11
    try padding-top too.... I think it goes (from the inside of the div, outward) padding > border > margin
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11
    Originally posted by Purple Martin
    Since you're using PHP to write the contents of the 70x70 div, you could make it write the text inside a paragraph with a big top margin:

    <p style="margin-top:30px;">No Image Available</p>
    doesn't this method defeat the purpose of css?
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    30
    Rep Power
    11
    what does it defeat, exactly? CSS is only there to change the appearance* of stuff, isn't it?

    Maybe you'd prefer to define a class for the paragraph. If there are going to be lots of these 70x70 divs then that's a good idea. If there's only one then an in-line style is appropriate.

    *EDIT - Oh yeah, and print, aural etc style. But still same principle.

IMN logo majestic logo threadwatch logo seochat tools logo