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

Alan Silver

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)

Jun 13 '06 #1

Subscribe Post Reply

5519

Els

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

Jun 13 '06 #2

Alan Silver

In article <1h******************************@40tude.net>, Els
<el*********@tiscali.nl> writes
<snip>

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

and that you IE probably was in Quirksmode,

Actually not as it happens, the doctype was...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<snip>

Anyone any suggestion?

h3{
line-height:5em;
}

Hmm, not sure it will work in my case as the text may not always be on
one line.

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.

TIA

You're welcome :-)

TIA again for any further help ;-)

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

Jun 13 '06 #3

Els

Alan Silver wrote:

which worked fine in IE (implying that this is the wrong way to do it!),
and that you IE probably was in Quirksmode,

Actually not as it happens, the doctype was...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I can't reproduce it. Aren't you mistaking the natural top margin of
the h3 in IE for vertical centering?
<snip>
Anyone any suggestion?
h3{
line-height:5em;
}

Hmm, not sure it will work in my case as the text may not always be on
one line.

I did double check the example you gave, and since it was one word...
Anyway, if the text might wrap, this method won't work indeed.
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.

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

Now playing: Pink Floyd - Fat Old Sun

Jun 13 '06 #4

Alan Silver

In article <1u****************************@40tude.net>, Els
<el*********@tiscali.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)

Jun 13 '06 #5

Similar topics

Multiple <h?> hierarchies on a page

by: Harlan Messinger | last post by:

Different pages on a web site can vary in the level of header to which they descend. One short page may have only <h1>, or <h1> and <h2>. Another, detailed page, might get all the way down to <h6>....

HTML / CSS

Need help using <div>s for layout (URL included) ...

by: Ethan | last post by:

I'm trying to set up a page with a header and 2 columns. I would like to use <div>s rather than tables. The page is here... http://64.142.13.246/style_testing_site/style_model2.htm In both IE...

HTML / CSS

Indenting information under heading elements

by: Chris Reigrut | last post by:

I have a bunch of (old) pages that are outline-driven, and use the h1-h6 elements to define headings. Is there any way that I can create a stylesheet to show them in an indented style? For...

HTML / CSS

<a> don't function inside a <div>

by: Speedy | last post by:

I have the following html body implemented in a site. But as soon as I added the <div> tag the <a> is not function any longer... Can someone tell me why this is not working ? Cheers Speedy ...

HTML / CSS

Using paragraphs within CSS box -- why not?

by: Joe | last post by:

Hello, The code below is an entire HTML page that has a problem when using a <p> tag inside a CSS box (when running IE6). I was being a good boy and I replaced my single-cell <table> elements...

HTML / CSS

Text in H3 tag is missing when using CSS

by: Linda Jimerson | last post by:

Hi - I'm using xhtml 1.0 and css 2.0 to code my website. I've run into an odd problem. I have a simple <h3> element (centered) under my photo, but as you can see Iin FIREFOX, Opera and Netscape)...

HTML / CSS

Replace form inputs with <br> tags

by: Dameon99 | last post by:

HI, Im new to PHP completely but Im wanting to format the inputs for $order and $specialinstructions so that the /n of input is replaced with <br /> tags in the html. Ive heard about using nl2br()...

PHP

Position of <p> inside <div>

by: nathj | last post by:

Hi All, I'm working on a new site that has a two column layout underneath a title bar. If you check out: http://www.christianleadership.org.uk/scratch/mainpage.php using IE or Opera you will...

HTML / CSS

Javascript & Google Maps error.

by: Nike1984 | last post by:

I'm fairly new to Javascript and it's more of a guessing game for me... I'm trying to build an app for Google Maps and just had some issues recently. First off I just wanted to say that everything...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice