aligning image with HTML/CSS

slugger · Feb 14, 2008

I am trying to align a picture right in the middle of the screen using HTML/CSS

Althought I am able to align it in the middle - either vertically or horizonatally but I am not able to do it both at the same time, ie no matter what the moitor size the picture must alway remain at the center of the screen

My code
Verticle Middle

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" 

"*www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verticle Alignment</title>
</head>
<body bgcolor=#000000>
<style> body,html { height:100%;margin:0; } </style>
<table border="0" height="100%">
<tr>
<td valign="middle">
<a href="*blogspot.com"><img src="center.gif"></a>
</td>
</tr>
</table>
</div>
</body>
</html>

Horizontal Middle

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" "*www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Horizontal alignment</title>
</head>
<body bgcolor=#000000>
<center>
<table>
<tr>
<td align="center">
<a href="*blogspot.com"><img src="center.gif"></a>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>

Although i can do it by making the image as a background, I want to make it a link so image as a background not an option

amitava82 · Feb 15, 2008

Try this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="*www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	left: 50%;
	top: 50%;
	position: absolute;
	padding: 0px;
	margin-top: -150px; //half of the image's hight
	margin-left: -150px; //half of the image's width
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="image.jpg" width="300" height="300" /></div>
</body>
</html>

There is a little problem with firefox after you resize browser below some specific size.. Opera, IE works good.

Pathik · Feb 15, 2008

Don't know much css but what are the dimensions of your image (center.gif) ?

slugger · Feb 15, 2008

@amitava

dint work buddy :sad:

heres the screenshot
*img185.imageshack.us/img185/1299/80098444sz9.th.gif

it has been centered vertically, but to the right horizontally
i removed the image resize attribute sne it was reizing it out of ratio

@pathiks

the gif file that i tried it with has dimensions of 534*159

anyway heres the code [amitava's with the modifications]

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="*www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	left: 50%;
	top: 50%;
	position: absolute;
	padding: 0px;
	margin-top: -80px; //half of the image's hight
	margin-left: -267px; //half of the image's width
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="center.gif"></div>
</body>
</html>

Pathik · Feb 15, 2008

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="*www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	left: 20%;
	top: 50%;
	position: relative;
	padding: 0px;
	vertical-align: middle;
	horizontal-align: middle;
	margin-top: -80px; //half of the image's hight
	margin-left: -267px; //half of the image's width
	
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="image.jpg" width="534" height="159" 

/></div>
</body>
</html>

slugger · Feb 15, 2008

Thanks Pathik
the code that you gave gave me a result nearest to what i was looking for

although your ouringal code rendered the page like this

*img153.imageshack.us/img153/173/inicentertk3.th.gif

so i modified it by changing the value of margin-top to 250px and so the page now looks like this

*img20.imageshack.us/img20/3546/fincenterjn1.th.gif

But thee still is a horizontal scrollbar [something that i wouldl iek to remove]

but when the same page is viewed in IE the page looks like this

*img257.imageshack.us/img257/882/iepagecf5.th.gif

although the page looks like this in full screen, the image ceases to remain at the center of the page as soon as i resize it

i would actually like the image to remain at the center of the viewable space in the browser window no mater what the size of the browser window

any suggestion??

amitava82 · Feb 15, 2008

Ok, this one is working..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="*www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	top: 50%;
	left: 50%;
	position: absolute;
	padding: 0px;
	margin-top: -80px;
	margin-left: -267px;
	height: 160px;
	width: 534px;
	
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="IUP.jpg" width="534" height="160" /></div>
</body>
</html>

just add hight width property to image div

slugger · Feb 15, 2008

thanks a TONNN buddy!!
Works like a charm

Pathik · Feb 19, 2008

Dude google for css tuts.

victor_rambo · Feb 20, 2008

ax3 said:
any site \ tut where i can learn 2 make a site with css only [without tables] ????

Just use DIV and position them with CSS.

aligning image with HTML/CSS

slugger

Banned

amitava82

MMO Addict

Pathik

Google Bot

slugger

Banned

Pathik

Google Bot

slugger

Banned

amitava82

MMO Addict

slugger

Banned

Pathik

Google Bot

victor_rambo

हॉर्न ओके प्लीज़