Forum Moderators: not2easy

Message Too Old, No Replies

CSS vertical align

         

gulliver

10:49 am on Jul 9, 2004 (gmt 0)

10+ Year Member



An edited cross post of an entry in another thread...

Hopefully it'll help someone not waste the hours I just have... ;-)

<click> Light bulb's on...

Entirely my error - and one of misunderstanding through assuming (rather than bothering to learn)...

I'd thought css vertical-align behaved similar to the table valign - now I know it doesn't...

-----
CSS Vertical-align

The vertical-align property in CSS has given gray hair to many a starting css coder until they finally realized what this property is, and what it is not.

This property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".
Vertical-align aligns the content inline.

This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a <td>.
-----

So, if I'm getting this right... to effectively vertically align an image/text block within a parent div, I should use equal top and botton padding?

DrDoc

3:30 pm on Jul 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



...or center it vertically, and use a negative top margin equal to half the block height.

gulliver

5:56 pm on Jul 13, 2004 (gmt 0)

10+ Year Member



I'd understood there's some 'reliability issues' with the neg value stuff - plus I try to do stuff 'even I can understand' so stayed away from it.

Totally unsure, is there an advantage over simply equal padding (or margin if appropriate)?