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

  • Thread starter Thread starter AAaron123
  • Start date Start date
A

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.
 
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)
 
bruce said:
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
Click to expand...

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 said:
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?
Click to expand...
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.
 
Back
Top