# 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*

```
<!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*

```
<!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.

```
<!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 
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]


```
<!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

```
<!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..

```
<!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.


----------

