I have inherited a school website. I am currently removing all the tables embedded in tables embedded in tables used for formatting and going more toward CSS based code.

I am having a problem getting the header with the school name to display the way I want it.

I would like to have the font to be 24px vertically centered in an area with a height of 30.

If I just set the font to be 24px I get a huge amount of white space around my text. If I set the height in my CSS file the text is not centered vertically.

Is there any way to do what I want or will I be stuck using an img file to display my text?

CSS code:

.CssHeader

{ color: black
font-family: Arial;
font-size: 24px;
font-weight: bold;
padding-left: 5px;
height: 30;
}

HTML code:

<div class="CssHeader">
<p>My School Name</p>
</div> <!-- #header -->