Centre Image

aumz · 28 Jun 2012 at 07:53

I am looking to do a simple webpage with just an image in the centre of the page. Something that will work across most web browsers. The code I have used is below.

<html><style type="text/css">
.image {
position: absolute;
left: 50%;
top: 50%;
right: 50%;
bottom: 50%;
}
</style>
<body class="image">
<img src="images/256px-Bebo.svg.png" alt="Bebo" width="75" height="75" class="image">
</body>
</html>

Is this the best method to use to do this. Thank you for any help.

aumz · 28 Jun 2012 at 17:32

Thank you guys for all the help

aumz · 30 Jun 2012 at 19:15

Made some changes...basically changed the image. The code is now this

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.image {
position: absolute;
left: 50%;
top: 50%;
right: 50%;
bottom: 50%;
}
</style>
</head>

<body bgcolor="#000000">
<img src="images/Mindset-Logo-Animate400px.gif" width="400" height="171" class="image">
</body>
</html>

the page is here
http://www.mindsetacademy.co.uk/index2.html

prob is image is now not centre.....also got an annoying line/border around the image...any help appreciated thanks

aumz · 30 Jun 2012 at 20:49

Thank you spunkey you really came thru for me there....lol

Would this code still work if the image size was changed.