How do I centre an <h3> vertically inside a <div>?

Hello,

Please pardon what is probably a dumb question, but if I have HTML like
this...

<div>
<h3>Ferrets</h3>
</div>

and CSS like this...

div {
height: 5em;
}

how do I get the <h3> centred vertically? I tried...

h3 {
margin: auto 0;
}

which worked fine in IE (implying that this is the wrong way to do it!),
but not in FF (implying that this is the wrong way to do it!).

Anyone any suggestion? TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver wrote:

div
h3>Ferrets</h3
/div

and CSS like this...

div {
height: 5em;
}

how do I get the <h3> centred vertically? I tried...

h3 {
margin: auto 0;
}

which worked fine in IE (implying that this is the wrong way to do it!),

and that you IE probably was in Quirksmode,

but not in FF (implying that this is the wrong way to do it!).

:-)

Anyone any suggestion?

h3{
line-height:5em;
}

TIA

You're welcome :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: King Crimson - Indiscipline

In article <1un9mwcgcozr$.4v6z9ts1yj27.dlg (AT) 40tude (DOT) net>, Els
<els.aNOSPAM (AT) tiscali (DOT) nl> writes

Alan Silver wrote:
snip
I can't reproduce it. Aren't you mistaking the natural top margin of
the h3 in IE for vertical centering?

Could be, never thought of that.

<snip>

I have knocked up a small sample to show how it might look, so please
have a look at http://www.kidsinaction.org.uk/h3.html and tell me how
you would centre the <h3> vertically.

No idea, other than using a table cell.

Oh well, thanks anyway. Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)