center <h1> with CSS

**Muller2** · Dec 28, 2006 07:12

Hi,

I am struggling to center a logo, using a <h1> tag and CSS.

I have the following so far:

Code:

#header{
  height: 65px;
  background-color: #ffffff;
  border-bottom: 5px solid #808080;
}
#header .container{
  width: 990px;
  margin: auto;
}
#header h1 {
	display:block;
	width: 250px;
	height:46px;
	text-indent:-9009px;
	color:Blue;
	background:transparent url(images/logo.jpg) no-repeat 0 0;
	float: right;
	}
#header h1 a {
	display:block;
	width:100%;
	height:100%;
	outline:none;
	}

Html

Code:

<div id="wrapper">
		<div id="header">
		<div class="container">
			    <h1><a href="http://www.logo.com">logo</a></h1>
		</div>
        </div>
</div>

Could someone please help me to get the logo to align in the center of the screen?

Many Thanks for your time.

Al

**Rob_D** · Dec 28, 2006 07:27

You seem to have too many divs here but try removing float:right and add margin:0 auto; to #header h1 {

**neildonald** · Dec 28, 2006 07:30

If you change your h1 CSS to look like this you should have more success.

HTML Code:

#header h1 {
	display:block;
	height:46px;
	color:Blue;
	background:transparent url(images/logo.jpg) no-repeat 0 0;
	text-align: center;
	}

**Muller2** · Dec 28, 2006 07:31

I have updated it to this but it still hasn't done the trick! Below is the updated code:

CSS

Code:

#header{
  height: 65px;
  background-color: #ffffff;
  border-bottom: 5px solid #808080;
}
#header .container{
  width: 990px;
  margin: auto;
}
#header h1 {
	display:block;
	width: 250px;
	height:46px;
	text-indent:-9009px;
	color:Blue;
	background:transparent url(images/logo.jpg) no-repeat 0 0;
	}
#header h1 a {
	display:block;
	width:100&#37;;
	height:100%;
	outline:none;
	}

HTML:

Code:

		<div id="header">
		    <div class="container">
			    <h1><a href="http://www.logo.com">logo.com</a></h1>
		    </div>
        </div>

Thanks,

Al

**Rob_D** · Dec 28, 2006 07:34

Read my post again, I added to it.

**Muller2** · Dec 28, 2006 07:34

Originally Posted by neildonald

If you change your h1 CSS to look like this you should have more success.

HTML Code:

#header h1 {
	display:block;
	height:46px;
	color:Blue;
	background:transparent url(images/logo.jpg) no-repeat 0 0;
	text-align: center;
	}

Neil,

I have just changed my code for yours but the image is still aligned to the left but the text is now in the center.

How do I move the image over?

Cheers,

Al

**Muller2** · Dec 28, 2006 07:36

Originally Posted by Rob_D

Read my post again, I added to it.

I have just made your change and nothing has happened.

**Muller2** · Dec 28, 2006 07:37

Here is the code as it now stands:

css:

Code:

#header{
  height: 65px;
  background-color: #ffffff;
  border-bottom: 5px solid #808080;
}
#header .container{
  width: 990px;
  margin: auto;
}
#header h1 {
	display:block;
	height:46px;
	color:Blue;
	background:transparent url(images/logo.jpg) no-repeat 0 0;
	text-align: center;
	margin: 0 auto;
	}
	
#header h1 a {
	display:block;
	width:100%;
	height:100%;
	outline:none;
	}

html:

Code:

<div id="header">
		    <div class="container">
			    <h1><a href="http://www.logo.com">logo.com</a></h1>
		    </div>
        </div>

Thanks for your help

Al

**Rob_D** · Dec 28, 2006 07:38

What is the size of your logo?

**Rob_D** · Dec 28, 2006 07:40

Change

Code:

#header .container{
  width: 990px;
  margin: auto;
}

to

Code:

#header .container{
  margin: auto;
}

The logo will not center while it is in a container of a width greater than the browser window

**Muller2** · Dec 28, 2006 07:42

Originally Posted by Rob_D

Change

Code:

#header .container{
  width: 990px;
  margin: auto;
}

to

Code:

#header .container{
  margin: auto;
}

The logo will not center while it is in a container of a width greater than the browser window

That, moves the logo right to the left of the screen.

**Muller2** · Dec 28, 2006 07:44

Originally Posted by Rob_D

What is the size of your logo?

It's small (http://www.allanmuller.co.uk/images/logo.jpg)

**Rob_D** · Dec 28, 2006 07:48

All you need to do is this:

Code:

<style type="text/css">
h1 {
	background:transparent url(images/logo.jpg) no-repeat center center;
	text-align:center;
	margin: 0 auto;
 	height: 65px;
	background-color: #ffffff;
	border-bottom: 5px solid #808080;
	}
</style>

HTML Code:

<body>
<h1><a href="http://www.logo.com">logo.com</a></h1>
</body>

Reasons:
h1 is a block element anyway
"center center" centers the background image (you had 0 0 which puts the images 0 pixels from the top and left of h1)
all the other divs you don't need.

**Rob_D** · Dec 28, 2006 07:59

Or even do this

Code:

<style type="text/css">
* {
padding:0;
margin:0;
}
#header{
	margin:0 auto;
	background-color: #ffffff;
	border-bottom: 5px solid #808080;
	text-align:center;
}
</style>

HTML Code:

<body>
<div id="header">
<img src="http://www.allanmuller.co.uk/images/logo.jpg" alt="logo" />
</div>
</body>

**Muller2** · Dec 28, 2006 08:03

Great, Thanks Rob_D

Al

**Rob_D** · Dec 28, 2006 08:06

And put the link around

HTML Code:

<img src="http://www.allanmuller.co.uk/images/logo.jpg" alt="logo" />

of course

User Tag List

Thread: center <h1> with CSS

Thread Tools

Display

center <h1> with CSS

Bookmarks

Bookmarks

Posting Permissions