473,898 Members | 2,581 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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)
Jun 13 '06 #1
4 5566
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
In article <1h************ *************** ***@40tude.net> , Els
<el*********@ti scali.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
In article <1u************ *************** *@40tude.net>, Els
<el*********@ti scali.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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
1993
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>. Maybe the site's page also display common sidebars with their own hierarchies, such as "In the News" block divided into two or three sections ("Nation", "World", "Metro") of two or three short clips each, each ending with a link to the full...
2
3562
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 6 and Mozilla 1.3.1 on Windows the two columns overlap a little with the right column in front. I'd like them to touching but not overlapping. #leftColumn has a width of 35% and #rightColumn has left 35% and width 65% so they should just fill the...
5
2248
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 instance, my HTML is: &lt;html&gt; &lt;body&gt; &lt;h1&gt;Title Page&lt;/h1&gt; Some content, perhaps the intro. &lt;h2&gt;Section 1&lt;/h2&gt;
1
2117
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 <body> <div id="text"> <h2>faq</h2>
7
3070
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 with these CSS boxes. However, I can't use <p> formatting within the a CSS box. The nested paragraph jumps outside of the box. I've been told that the HTML works as expected sinde the Dreamweaver preview window, so I'm suspecting IE6. Anyone know...
14
2568
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) the first word of my <h3> header is tossed to the right top of larger div. Can anyone help. It seems like this only happens when the first word is very short (two or three chars). Thanks sooo much. linda ...
11
1938
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() and Ive tried a rediculous number of things to try to make it work and use it properly from entries from many different forums. Can anyone please have a look at my code and let me know how I can implement this?! <?php // multiple recipients...
5
5271
nathj
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 see what I am after as these browsers work fine. However, in FF the results are slightly different - take a look and you'll see that the <p>, within <div class="mainContent"> has shot way over to the right. I've been working on this for 2days now...
5
2947
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 works fine in FF and IE. It's Chrome I'm having issues with. I understand that Chrome is still somewhat in beta stages, so some bugs might occur. However this seems like something I might have done. So... I used a code that I found on Econym as...
0
9993
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9839
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11256
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10857
jinu1996
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10481
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
8034
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7187
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5877
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6076
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.