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


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.
 
Ad

Advertisements

B

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)
 
A

AAaron123

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

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
 
Ad

Advertisements

A

AAaron123

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?
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top