Newbie: CSS Center Image

[johnnyseb]

I have a Wordpress theme that I'm editing for my website. By default the theme is positioning the Logo to the left, and I would like to center it. After hours of playing around, and no support from the theme author, I thought I'd post the question here.

Here is the CSS pertaining to the Header:

/* Header */
#header {
	background:url('images/header-bg.png') repeat-x;
	height:40px;
	overflow:hidden;
	padding:120px 0 0 0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:5;
}
#header-s {
	background:url('images/shadow-b.png') repeat-x;
	height:10px;
	position:absolute;
	top:160px;
	left:0;
	width:100%;
}
#header-container {
	margin:0 auto;
	width:960px;
}
#logo-container {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}
#logo {
	margin:0 auto;
	padding:0 0 0 15px;
	width:945px;
}
#logo a {
	text-decoration:none;
}
#logo p {
	color:#eee;
	font-size:30px;
	line-height:30px;
	margin:35px 0 0 0;
	text-align:left;
}
#logo span {
	color:#eee;
	font-size:18px;
	line-height:18px;
	margin:5px 0 0 0;
	text-align:left;
}

When I use margins to position it, it looks great at most screen resolutions, although at 800x600 its way too far to the left. I'd like to center the logo for all visitors.

I have also tried centering the logo container with:

margin: 0 auto;
text-align: left;

I think the problem is that the theme using margin to position the logo by justifying it to the left, and adding a 5px margin to the top. I can't simply add 500px to the left because it doesnt display properly. I'm sure there is an easy solution, and I just don't know enough about CSS to figure it out. Any help is greatly appreciated!

[Schmoopy]

Can you post a link to the site where this is being used?

Seeing how the page is laid out is necessary to get a better understanding of how the CSS affects the HTML.

I would have said margin:0 auto would be enough, but I find it strange that it works for most resolutions but not 800x600.

Easiest thing to do is post a link to your page so we can have a fiddle.

[johnnyseb]

Thanks for your quick response. I am a photographer and know little about web design/css. I have been editing this theme locally on my PC, and testing it out on my 42" media center.

Here is a preview of the theme, from the Author:
http://www.theme-dutch.com/presents/screen/

I have removed the dropdown search box and social icons, hence the reason I want to center my Logo.

[Schmoopy]

Ok I did this completely on the fly, so yours may not be the same.

#logo {
	text-align:center;
	padding:0 0 0 15px;
	width:100%;
}

Try it and let me know what happens.

Edit: Also resized to 800x600 - still working.

[johnnyseb]

Wow, yeah.. thank you so much! I can't believe that with all the different combinations I tried, that wasn't one of them.

Schmoopy, you rock!

[Schmoopy]

Glad it worked for you

Let us know if you have any more problems with the site.

Good luck with it!