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:


body {

div.header {
    border-bottom:thick double black;

h1 {


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

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 {

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.


Ensure you 0 out the other H1 margin values:

h1 {
    margin:0 0 0 20px;

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

For example, I use

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:

Need Your Help

WPF ComboBox SelectionChanged event to command not firing

wpf mvvm combobox

I have the following XAML of a ComboBox which has a code-behind SelectionChanged event handler and another Command property of the ViewModel. I have set the SelectedIndex property to 0. Now when I ...

Create C# dll and use method with powershell

c# powershell dll

I created a simple C# dll and registered it using RegAsm.exe. One very simple method is invoked without parameters and returns a number, here is a simplified version.