Forums

Eraser35

I would like to center my logo in the exact center of the screen. I kind of got it working with this code, but it still looks off center (slightly.) The image is W:273px x H:205px

How do I actually get it centered? I am currently using the following code. The logo sits inside of the container.

CSS

#container {
	text-align: center;
}

#logo {
 	position: fixed;
  	top: 50%;
  	left: 50%;
  	margin-top: -136.5px;
  	margin-left: -102.5px;
}

HTML

	<div id=\"container\">
			<img id=\"logo\" src=\"images/logo.png\" alt=\"logo\" />
		</div>

Eraser35

Oops! I got it. I accidentally mixed up the margin-top and margin-left #logo parameters. Not to mention, the smallest pixel denomination is 1px. There is no .5px

WRONG WAY
#logo {
position: fixed;
top: 50%;
left: 50%;
margin-top: -136.5px;
margin-left: -102.5px;
}

RIGHT WAY
#logo {
position: fixed;
top: 50%;
left: 50%;
margin-top: -103px;
margin-left: -137px;
}

treehouse : what would you like to learn today?

Forums

The Infamous Image Centering Issue