Center <h1> with CSS

HTML & CSS
1

Hi,

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

I have the following so far:


#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


<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

2

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

3

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

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

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

CSS


#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:


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

Thanks,

Al

5

Read my post again, I added to it.

6

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

7

I have just made your change and nothing has happened. :rolleyes:

8

Here is the code as it now stands:

css:


#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:


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

Thanks for your help

Al

9

What is the size of your logo?

10

Change


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

to


#header .container{
  margin: auto;
}

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

11

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

12

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

13

All you need to do is this:

<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>

<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.

14

Or even do this

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

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

Great, Thanks Rob_D

Al

16

And put the link around

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

of course