PDA

View Full Version : 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

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

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

<!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 :sad:
heres the screenshot
http://img185.imageshack.us/img185/1299/80098444sz9.th.gif (http://img185.imageshack.us/my.php?image=80098444sz9.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"

"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

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

http://img153.imageshack.us/img153/173/inicentertk3.th.gif (http://img153.imageshack.us/my.php?image=inicentertk3.gif)

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

http://img20.imageshack.us/img20/3546/fincenterjn1.th.gif (http://img20.imageshack.us/my.php?image=fincenterjn1.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

http://img257.imageshack.us/img257/882/iepagecf5.th.gif (http://img257.imageshack.us/my.php?image=iepagecf5.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
15-02-2008, 08:00 PM
Ok, this one is working..

<!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
slugger
15-02-2008, 10:28 PM
thanks a TONNN buddy!!
Works like a charm :)
ax3
19-02-2008, 04:51 PM
any site \ tut where i can learn 2 make a site with css only [without tables] ????
Pathik
19-02-2008, 05:14 PM
Dude google for css tuts.
rohan_shenoy
20-02-2008, 11:22 PM
any site \ tut where i can learn 2 make a site with css only [without tables] ????
Just use DIV and position them with CSS.