vertical-align text in a Heading

vertically center text

[MountainMan]

Hello,

I can't seem to get my heading to align in the middle with my style sheet. Looks to me like the text is on the upper side of the div. Here is the code and if anyone has any pointers I would appreciated it.

Thanks

Matt

HTML
<div id="pageheading">
<h1> Where the Mountain Man Really Wants to Be. </h1>
</div>

STYLE SHEET

#pageheading {
position:absolute;
top:0;
left:20%;
height: 100%;
width: 60%;
}

H1 {
font: Verdana Geneva Arial Helvetica sans-serif;
font-size: 18pt;
text-align: center;
vertical-align: middle;
color: #990000;
margin: 15px 10px 10px 10px;
}

[cornelius]

Hi,

As far as I know, the vertical-align command is not well supported. I have tried to get it to work as well, but reading other posts I came to this conclusion.

play around with margins and padding to get it to display. Just beware of the ie bugs...

If anybody else can give some insight into this as well, pls.

-Cor

[SuzyUK]

vertical-align is well enough supported it's just that it possibly doesn't do what you think it does ;)

It vertically centers text within it's own line box [w3.org] whose height is controlled by the line-height property..

The height of a line box is determined by the rules given in the section on line height calculations.

Not sure what 100% refers to in your #pageheading div MountainMan (Welcome btw... ;)) but this could still work for you...

in the

h1

rule where you have the font-size set to 18pt you could set a line height to an explicit height and you will see the text vertically center.

e.g. h1 {line-height: 400px;}

Note: percentage won't work because percentage line-height values are based on the font-size so line-height:100%; will be equal to 18pt in your case and not 100% of the div height. You can also set values for line-height just as a number e.g. line-height: 1.5; but that won't help either as that is equivalent to 150% i.e.: 1.5 x the font-size.

So using vertical-align and line-height to achieve this can only really be done if the height of the pageheading div and the h1's line height values are set to the same explicit value either in pixels or em's (pt can be used but they are really a print setting) and for best results the text in the heading itself shouldn't wrap.

Suzy

[MountainMan]

Thanks a lot,

I'll play around with the line-height and see if I can get it to work. I appreciate the explaination.

Matt

[l3lake]

This helped me out as well. I could never get that code to work right. Now I understand it! Thanks.