February 12th, 2004, 08:09 PM
CSS Vertical Align Question
I have a div with this ID:
border: 1px dashed #333333;
font-family: Arial, Helvetica, sans-serif;
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.
February 12th, 2004, 09:22 PM
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?
February 12th, 2004, 09:27 PM
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.
February 12th, 2004, 09:31 PM
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>
February 12th, 2004, 09:34 PM
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%" ??
February 12th, 2004, 09:37 PM
It should do. Keep experimenting with stuff, I'm sure you're on the right track.
February 12th, 2004, 09:47 PM
try padding-top too.... I think it goes (from the inside of the div, outward) padding > border > margin
February 12th, 2004, 09:50 PM
doesn't this method defeat the purpose of css?
February 12th, 2004, 09:59 PM
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.