Centering Logo in CSS

Centering Logo in CSS/Wordpress

[michaelwwhs]

Hi,

Newbie to this forum but I figure it would be a great place for some help. I've got some problems with centering a logo in a CSS file on my wordpress website. I will post the code for the header and I would appricate it if somebody would fix the code so that it makes the logo centered. Any help would be awesome!

Thanks,
Michael

Header
-------------------------------------------------- */
.h_left { float:none; position:relative; background:none; }

h1.logo { position: relative; display: block; font-size:18px; padding:28px 0 20px 20px; border-bottom:none; }
.logo span { width: 100%; height: 100%; position:absolute; bottom:0; left:0; }
.logo span, .logo span a {background:url(2-red/logo.png) no-repeat; }
.logo span a { display:block; background:url(2-red/logo.png) no-repeat; cursor:pointer; }
.logo a:hover { text-decoration:none; color:#a83a01; }

/*=== Logo Spot ===*/
#header .blog-title{ padding:25px 0 0 0; }
#header .blog-title a { color:#e3c273; font:normal 32px Georgia; text-transform:uppercase; text-decoration:none; padding:10px 15px }
#header .blog-title a:hover{ text-decoration:none; color:#fff; background:none }
#header h1.logo { text-decoration:none; border:none }
#header h1.logo a:hover{ background:none; color:#fff; }
#header h1.logo { margin:28px 0 20px 0; padding:0; text-align: center; }

#header p.slogan { float:none; margin:28px 0 0 10px; font:italic 18px Georgia, "Times New Roman", Times, serif; padding:6px 0 6px 25px; color:#979797; background:url(2-red/slogan_bg.png) no-repeat left; } 

[Major_Payne]

To center anything, a width less than 100% must be applied to the container. Then you can use the css property: margin: 0 auto;

Any positioning set by css must be removed if you need the logo centered within a container. Be sure to set a proper height also to show logo image.

Example for body tag:

body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile.

[Shado]

I'm with MP on this - to centre a item use margin:auto; as a side note you use text-align to center text.

Personally I would make the logo a class of the header and not the H1 but thats just me

[Major_Payne]

Agree with Shado. If there is nothing but an image between the hi tags, then you would be using incorrect synyax as an image is not a main title per se. Search Engines will not see anything as such.

You are using "2-red/slogan_bg.png" in two places for a background. IE has problems with pngs. Especially if they contain alpha channel information. IE 9 will cure that problem when it comes out.

[michaelwwhs]

Okay, so would it be possible for you to fix the code so that it would center? But I do need to leave it as h1 for the time being. I just don't have a clue on how to fix it.

Thanks,
Michael

[Major_Payne]

Got the HTML for the part you want centered?

[Shado]

Michael - just add margin:auto; to the div that contains your logo. That should center it.

#header {margin:0px auto; width:?; height:?;}
#header .logo {}

<div id="header"><div class="logo"></div></div>