24 replies [Last post]
hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

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>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Center image within div

add line-height: 500px to the containing div

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

Center image within div

that didn't do anything at all

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Center image within div

link?

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

Center image within div

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Center image within div

Hi

The way you have the page now is what I got, still no vertical centering.

Trevor

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

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>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Center image within div

my apologies, you need a strict doctype for this to work.

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

Center image within div

I've amended to strict doctype, but still no vertical centering.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

Anonymous
Anonymous's picture
Guru

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) Tongue

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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:

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Center image within div

Hi

Neither FF or IE for PC play ball.

Trevor

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Center image within div

strange :?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

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>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Center image within div

your doctype is wrong - its mixed up. it states transitional, but points to a strict url.

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

Center image within div

I've fixed the doctype. Now FF fails to center as well as IE

hessodreamy
Offline
Regular
Last seen: 15 years 24 weeks ago
Joined: 2005-04-13
Posts: 18
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me