Mon, 2005-11-14 17:36
This old chestnut - I've read a bunch of articles on this but still can't get it working.
I have an image withing a fixed size div. I need to keep the div fixed size because I'll be swapping the images using javascript. Also, because the images and their sizes will be changing, I can't center them by fixing the margins, like someone suggested.
So how do I get the picture to be centered vertically & horizontally within the div, and stay centered even when the image (and image size) change?
Here's a snippet:
[code]
<div style="width:500px; height:500px; border:1px solid gray; ">
<img style="text-align:center; vertical-align:middle;" id="mainpic" src="../images/productpics/6681-1099424825.jpg" width=190 height=288>
</div>
Mon, 2005-11-14 17:38
#1
Center image within div
add line-height: 500px to the containing div
Mon, 2005-11-14 18:37
#2
Center image within div
that didn't do anything at all
Mon, 2005-11-14 18:40
#3
Center image within div
link?
Mon, 2005-11-14 18:45
#4
Center image within div
Mon, 2005-11-14 19:12
#5
Center image within div
Did you read this?
Specifically, number 3 and 4 of Before you ask?
At the very least you should have a valid page - ever hear of the <body> tag? You didn't even close the div. You need a full doctype complete with url to put browsers into standards mode. Then it will work. Apply the text-align: center and the line-height to the container and the vertical-align:middle to the image.
Mon, 2005-11-14 20:28
#6
Center image within div
Hi
The way you have the page now is what I got, still no vertical centering.
Trevor
Mon, 2005-11-14 20:30
#7
Center image within div
hi. Apologies for the rubbishness of previous posts.
I've added the doctype and missing element and it now centers horizontally, but still not vertically.
I've got the loose doctype, as that's what was in the website i've inherited. Is it OK to use for this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="width:500px; height:500px; border:1px solid gray; text-align:center; line-height:500px;">
<img style="vertical-align:middle; border: 1px solid orange;" src="pics/sadbot.jpg" width=190 height=288>
</div>
</body>
</html>
Mon, 2005-11-14 20:43
#8
Center image within div
my apologies, you need a strict doctype for this to work.
Mon, 2005-11-14 21:38
#9
Center image within div
I've amended to strict doctype, but still no vertical centering.
Mon, 2005-11-14 21:52
#10
Center image within div
Hi
I even tried it with strict xhtml 1.0, the image will not play ball. Put a span with text in, no problems.
The image's bottom sits at the bottom of the text line. Tried other vertical-align settings too. Still no go.
Trevor
Mon, 2005-11-14 22:38
#11
Center image within div
It's not pretty but:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <div style="width:500px; height:500px; border:1px solid gray; position:relative;"> <div style="position:absolute; top:50%; height:1px; width:100%; overflow:visible;"> <img style="border: 1px solid orange;position:absolute; left:50%; margin-top:-144px; margin-left:-95px" src="sadbot.jpg" width=190 height=288> </div> </div> </body> </html>
*edit - Fixed to work with IE. (took out vertical-align:middle; in the img) 
Mon, 2005-11-14 22:43
#12
Center image within div
Vertical-align on other than a table will only offset the line boxes.
It's very simple though you set the parent div to display:table-cell and vertical-align:middle and a perfectly centred image one has, but of course a certain browser was designed to make our lives as thoroughly difficult as can possibly be for no good reason and this solution fails totaly so if you care not for IE then thats the way to go.
Other possibilities are to position the parent relative and position the image absolute with top:50% and left:50% and margin-top: -144px and margin-left: -95px which will give a centered image which is fine as long as you know the dimensions of the image.
A variation on that, set display:table; text-align:center on the outer div set a new div around the image and make that display:table-cell position:relative; vertical-align:middle; then for IE feed these rules using the star selector hack to the new div top:50% and again to IE only feed top:-50%; position:relative to the image element, this will work for images with unknown dimensions.
Another possibility is -as one member might advocate- to use , in this instance a single cell table and use vertical-align:middle on it.
Hugo.
Mon, 2005-11-14 23:57
#13
Center image within div
Is it only IE that won't play ball with the first method? I don't have a PC here for testing. It worked fine for me with the strict doctype on Firefox and Safari and even IE/Mac.
Sorry for misleading you :oops:
Tue, 2005-11-15 00:06
#14
Center image within div
Hi
Neither FF or IE for PC play ball.
Trevor
Tue, 2005-11-15 00:32
#15
Center image within div
strange :?
Tue, 2005-11-15 01:36
#16
Center image within div
vertical-align will align inline elements or line boxes , add a paragraph with some text in along with the image and you can position the image using text align middle so that the text will appear to be at the level centre of the image but it's the generated line boxes that are being adjusted relative to each other, remove the image from the <p> and you will see the text able to take the line-height of the parent and seemingly centre itself, as text must centre itself in it's given line height.
Tue, 2005-11-15 03:27
#17
Center image within div
I mean strange that it works on Mac and not PC. I've now tested in FF (1.04, 1.05, & 1.07), IE/Mac 5.2.3, Safari 1.3.1 and 1.0, Netscape 7.2, and Opera 8.02.
All but IE (can you believe it) fail without a doctype or with a transitional doctype. Put in strict and works in all the above.
Tue, 2005-11-15 11:06
#18
Center image within div
OK. I've done what hugo suggested and put in a div around the image. It works fine in FF but not IE. Have I done this right? I'm new to the star selector hack. Although, with or without the stars made no difference to either browser, so it's probably not right.
As I'm swapping images with javascript, any approach with fixed margins isn't really feasible. I'm coming close to just sticking a table in. God bless css.
Have a look http://www.aocd00.dsl.pipex.com/center.html
you can see where the new div is, but the image still sticks to the top.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#outerdiv {
width:500px;
height:500px;
border:1px solid gray;
text-align:center;
line-height:500px;
display:table;
}
#imgdiv {
border:1px solid blue;
display:table-cell;
position:relative;
vertical-align:middle;
*top:50%;
}
#image {
border: 1px solid orange;
*top:-50%;
*position:relative;
}
</style>
</head>
<body>
<div id="outerdiv">
<div id="imgdiv">
<img id="image" src="pics/sadbot.jpg" width=190 height=288>
</div>
</div>
</body>
</html>
Tue, 2005-11-15 12:00
#19
Center image within div
your doctype is wrong - its mixed up. it states transitional, but points to a strict url.
Tue, 2005-11-15 12:15
#20
Center image within div
I've fixed the doctype. Now FF fails to center as well as IE
Tue, 2005-11-15 12:22
#21
Center image within div
oh yes it works a charm, until the images changes to one with a different size.
Then again, I could use js to change the margins as well.
Wed, 2005-11-16 16:00
#22
Center image within div
Sorry for late reply the post did not show up as fresh in view posts.
You are using the star selector filter incorrectly it needs to be a rule itself, thusly:
* html #somediv {}
This should work:
#outerdiv {
display:table;
width:500px;
height:500px;
border:1px solid gray;
text-align:center;
vertical-align:middle;
}
#imgdiv {
display:table-cell;
width:100%;
border:1px solid blue;
position:relative;
vertical-align:middle;
}
* html #imgdiv {
top:50%;
left:0;
}
img {
border: 1px solid orange;
}
* html #imgdiv img {
top:-50%;
position:relative;
}
I removed the #image div as it was unnecessary.
This should centre an image in IE the width property is needed on the #imgdiv to give it HasLayout in IE.
There is one problem I foresee with this technique and that is if the image height when doubled is greater than the height of the main container then the top:50% pushes the #imgdiv bellow the bottom of the #outerdiv which may cause problems with elements bellow.
The image is 288px high, we then move it down to a midway point in the container and drag the actual image back to the middle point but the #imgdiv is still 288px high starting from the mid point, it therefore hangs out of the bottom of the #outerdiv by 38px which may not be a problem depending on what is happening after the #outerdiv.
Hugo.
Thu, 2005-11-17 00:58
#23
Center image within div
In IE, with window reduced to a small portion of the img height, I was able to scroll the image, but not the outer box. Firefox had no trouble, naturally.
cheers,
gary
Thu, 2005-11-17 10:01
#24
Center image within div
Not with you on that one Gary, can't find a problem scrolling, but I'm probably being dense :roll:
Anyway I spit on IE for all the trouble it causes 
it's a case of your single table cell for this type of thing, it's daft to waste time, energy and convoluted code on a problem that is so simply sorted.
Hugo.