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.

Kyzou · 28 Jun 2012 at 10:28

That will work. However it is probably better to use:

.image {
margin-left: auto;
margin-right: auto;
}

GravyMonster · 28 Jun 2012 at 10:49

That will only centre horizontally though, original was centred vertically too.

OP - that's fine. It should work in all modern browsers. You may need to specify html, body { height: 100%; } for it to work properly in older browsers though.

Tripnologist · 28 Jun 2012 at 11:56

Yeah, that's perfectly fine as the OP is using a small image.
I wouldn't recommend that method for a much larger image though as it would get cut off on small resolutions.

Kyzou · 28 Jun 2012 at 12:10

Oh yes, sorry! In that case the method you have used is good. Centering is something that has never been well handled in web development. It may have been tackled in CSS3? But I haven't really looked into it recently.

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

GravyMonster · 30 Jun 2012 at 20:38

You'll need to add a negative margin to the top/left of the image which is half it's width and height, try this.

Code:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -85px 0 0 -200px;
}

I also removed the right and bottom settings as you only need top and left.

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.