aligning image with HTML/CSS

slugger · 14-02-2008, 10:45 PM

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" 

"http://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="http://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" "http://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="http://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 · 15-02-2008, 10:42 AM

Try this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 · 15-02-2008, 11:03 AM

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

slugger · 15-02-2008, 12:40 PM

@amitava

dint work buddy

heres the screenshot

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" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 · 15-02-2008, 01:52 PM

Try this

Code:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 · 15-02-2008, 02:43 PM

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

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

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

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 · 15-02-2008, 08:00 PM

Ok, this one is working..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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