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.

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?

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.

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>

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%" ??

It should do. Keep experimenting with stuff, I'm sure you're on the right track.

try padding-top too.... I think it goes (from the inside of the div, outward) padding > border > margin

doesn't this method defeat the purpose of css?

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.