Help with positioning

[hybrid kill3r]

What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol. Here is what I am currently getting: This is what I would like... you can ignore the difference in fonts, etc. I just want to know how to actually center the image... lol. This is my css:

#profile-banner {	background: #000;	height: 267px;	border-bottom: 1px solid #999;	margin: 0px 0px 25px 0px;	text-align: center;} #profile-banner h1 {	font-size: 36px;	font-family: Piximisa;	letter-spacing: 5px;	padding: 15px;	margin: 0px;} #profile-banner p {	margin: 0px;	padding: 0px;	} #profile-banner .logo {	top: 125px;	background: #333;	border: 1px solid #666;	width: 250px;	height: 250px;	position: absolute;	margin: 0 auto;	padding: 0px;}

This is my HTML

<div id="profile-banner">								<h1>Some Team Name</h1>								<p>					Some catchy slogan.				</p>								<img src="{BLANK-LOGO}" alt="" border="0" class="logo">							</div>

Thanks for your time.

Edited June 12, 2013 by Hybrid Kill3r

[newseed]

Since you do not have any known width for #profile-banner you can do the following to your .logo css:

#profile-banner .logo {	  top: 125px;	  background: #333;  	  border: 1px solid #666;  	  width: 250px;  	  height: 250px;  	  position: absolute;  	  /*delete this*/margin: 0 auto;  	  padding: 0px;	  /*added*/  left:50%;  	  /*added*/ margin-left: -125px;}

The left: 50%; is telling it to move the left side of the image to the center of the page. The margin-left: -125px; is calculated based on half of the width of the image. In your case your image is 250px wide. Dived that in half and you have 125px. Since the left side of the image is centered you want to subtract it back to the left by 125px which is why you see a negative sign in that style.

Edited June 12, 2013 by newseed