FF placed image at the top of the <p> rather in its vertical middle

[AAaron123]

I don't expect to see an answer to this because I tried so many things and
nothing worked in FF.

But I have much time invested and would like a payoff.

The markup below is probably the simplest I've tried that works in IE8
(nothing worked in FF).

Actually, trying to get FF to center the image I tried man many things
(display, margin ...) IE8 almost always displayed correctly but FF usually
centered the image horizontally in <p> but placed it at the top of the <p>
rather in its vertical middle.

But if there is some magic out there I'd sure like to know how to center the
image using FF.

Problem:<br />

A div contains a p which contains an img<br />

The div and the p must be full width<br />

The p should be vertically centered within the div<br />

The image must be centered within the p<br />

Test in FF and IE8<br />

<div style="border: 1px solid red; padding: 0; margin: 0; height: 300px;">

<p style=" position: relative; top: 50px; background-color: pink;text-align:
center; vertical-align:middle;

margin: 0; height: 200px; line-height: 200px;">

<img style=" border: 0px;"
src="http://groups.google.se/intl/en/images/logos/groups_logo.gif"
alt='Test2' />

</p>

</div>



I'd appreciate any help at all.

 

[bruce barker]

not sure what you are trying to do. read your css and learn about
inline, and block elements, and how alignment is done:

http://www.w3.org/TR/CSS2/visudet.html#line-height

an image is a inline object that should be aligned by the baseline of
the current text line. in your example, there is no text, so it should
be at the top of the <p> (as this is the baseline). IE is probably
interpreting the whitespace as text (so it move the image down to the
new baseline). put it in standards mode and this should go away (look
like firefox) with the image at the top.

if you put in a &nbsp; before the image, it should also look the same.

-- bruce (sqlwork.com)

 

[AAaron123]

not sure what you are trying to do. read your css and learn about
inline, and block elements, and how alignment is done:

http://www.w3.org/TR/CSS2/visudet.html#line-height

I believe I read this before - read so much I can't be sure this is one of
them.
I couldn't determine where the baseline of an image is.

Also, I quessed that text is an inline object -is that true?

I expected img to work the same as text - not true?

middle: Align the vertical midpoint of the box with the baseline of the
parent box plus half the x-height of the parent.
I couldn't find out what the baseline of the empty parent <p> was? Where is
that?


Thanks a lot

 

[AAaron123]

I believe I read this before - read so much I can't be sure this is
one of them.
I couldn't determine where the baseline of an image is.

Also, I quessed that text is an inline object -is that true?

I expected img to work the same as text - not true?

middle: Align the vertical midpoint of the box with the baseline of
the parent box plus half the x-height of the parent.
I couldn't find out what the baseline of the empty parent <p> was?

Now I know it is at the top because you told me.
But how do you know that?
I couldn't find info that anywhere.