Issues centering H1 within a DIV and rendering from different locations

Creating a very simple webpage for DIV testing. I have a DIV that creates a header at the top of my page, which is fixed so it does not scroll off the page. Within this DIV, I have an H1 header that I want to be centered vertically, left justified but away from the left edge of the page by a certain amount (20 pixels).

Here is my code:

CSS:

body {
    font-family:"Calibri";
    margin:0px;
}

div.header {
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    position:fixed;
    background-color:#7fc7f4;
    border-bottom:thick double black;
    z-index:2;
}

h1 {
    color:black;
    margin-left:20px;
    font-variant:small-caps;
}

HTML

<!Doctype html>
<html>
    <body>
        <div class="header">
            <h1>Website Heading</h1>
        </div>
    </body>
</html>

When it renders on my C:\ drive, the H1 text is at the bottom of my DIV block. I copy the files to a network drive, and open it from there. When it renders from the network drive using the same browser on my computer (IE9), it is centered all on its own.

For my C:\ drive, I tried adding the following to my H1 in the CSS:

h1 {
    color:black;
    line-height:50px;
    vertical-align:middle;
    margin-left:20px;
    font-variant:small-caps;
}

This has absolutely no effect when rendered on my C:\ drive. Rendered on the network, it is still centered as I want it, just as it was before I added these lines which appear to be ignored. I obviously want this to be consistent in both the C:\ drive and network locations, so I know that my pages are working properly when both building/testing and deploying for all to consume. It also has to be consistent across Chrome and Firefox as well.

Thoughts anyone?

One thing I'm not sure about is where to add these lines of code. Do I add them to the H1 tag as I have done, or do I add them to the DIV tag? Does it matter? I have tried both, and it doesn't seem to make a difference.

You'll have to forgive me, as I am relatively new to CSS, and am trying to get a better understanding. I have searched through the answers on similar topics on here, and all the suggestions that people have given don't seem to work. So I am hoping that I am just missing something simple.

Answers


Ensure you 0 out the other H1 margin values:

h1 {
    color:black;
    margin:0 0 0 20px;
    font-variant:small-caps;
}

You should be implementing a normalize CSS file to baseline your HTML elements if you aren't already.

For example, I use http://html5boilerplate.com/


What you're looking for is 'line-height' on the H1 element, the following makes the line-height of the h1 element the same height as the containing div, giving it the effect of vertically aligning in the middle.

You'll also need to remove the margins that are on the h1 element by default, by using margin:0;

h1 { line-height:50px; margin:0; }

See here: http://jsfiddle.net/2RtkT/1/


Need Your Help

iphone dev add cell text to the same position point on UIView

iphone tableview cell

When i selected a cell, i want to add the text from the cell to the underlying UIView at the same position.

Update a data row inside an asp.net Data Grid View

c# asp.net

I think it would be easier for you to understand my problem if I explain the scenario a bit.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.