Mon, 2005-09-19 13:23
hi
this is quite a straightforward problem:
is there a simple cross-browser/platform way of centring an image vertically and horizontally within a fixed-size div ?
or would i need to put the image into a nested <div> and then centre that?
thanks
Mon, 2005-09-19 13:34
#1
how can i center an image in a <div> ?
Within a fixed size <div> you should be able to use "margin" to center your image. You might also want to try using "vertical-align" 
Mon, 2005-09-19 13:46
#2
how can i center an image in a <div> ?
thanks for your reply
but I've just realised that i wasn't clear enough in my question
the image will be inserted by php from a database - so the image could be any size but not larger than 450x450 - so i want to set up a div with a width and height of 450 and then center the image inside that - so that if, for example, the selected image is 450x300 then it will be centred vertically within the box
but the problem is that i don't know what dimensions the image will have before it is selected so i can't set the margin width - unless maybe I detect the image size using javascript and then write the margin size directly into the <div> tags
is there a simpler way ?
thanks
Mon, 2005-09-19 13:49
#3
how can i center an image in a <div> ?
You could do a couple of different things here. Use php to determine the image size and set margin accordingly, or if the div height is known, you could set the line-height to equal the div height and use vertical-align: middle;.
HTH
Mon, 2005-09-19 14:15
#4
how can i center an image in a <div> ?
For horizontal centering, make the image display: block; and use margin: 0 auto;
In addition to wolfcry's CSS solution, a recent thread discusses how to do this in php - a search on php & getimagesize should find it.
Mon, 2005-09-19 15:19
#5
how can i center an image in a <div> ?
ok - thanks both of you
I'll give those a try
Mon, 2005-09-19 15:42
#6
how can i center an image in a <div> ?
ok well it doesn't appear to work
here's the code I'm using to test the aligning stuff
<html>
<head>
<title></title>
<style type="text/css">
img{
display: block;
margin: 0 auto;
}
#centred{
position:absolute;
width: 600px;
height: 600px;
border-color: #3333333;
border-width: 1px;
border-style: solid;
line-height: 600px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="centred"><img src="photos/greenTomato.jpg" width="364" height="290"></div>
</body>
</html>
it centers horizontally but not vertically
what have I done wrong ?
thanks for your patience
Mon, 2005-09-19 15:47
#7
how can i center an image in a <div> ?
in fact it centers horizontally in Firefox but not IE .... 
Mon, 2005-09-19 15:57
#8
how can i center an image in a <div> ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img{
margin: 155px 118px;
padding: 0px;
}
#centred{
width: 600px;
height: 600px;
border-color: #3333333;
border-width: 1px;
border-style: solid;
}
</style>
</head>
<body>
<div id="centred">
<img src="test.jpg" width="364" height="290" alt="test" />
</div>
</body>
</html>
I managed to center it by using margins and a little arithmetic, someone else probably has a better method.
Mon, 2005-09-19 16:04
#9
how can i center an image in a <div> ?
for the vertical alignment to work the image needs to remain an inline element. To horizontally center an inline element just use text-align: center on the container.
Mon, 2005-09-19 19:05
#10
how can i center an image in a <div> ?
wolfcry911 wrote:
for the vertical alignment to work the image needs to remain an inline element. To horizontally center an inline element just use text-align: center on the container.
ah, um - yes - I tried what I thought was going to be an inline element by putting the img in another div and putting the text-align: center in the parent div but that obviously wasn't it ...
It now centers horizontally in FF and in IE but what do I need to change to make the image an inline element ?
thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title></title>
<style type="text/css">
img{
display: block;
margin: 0 auto;
}
#centred{
position:absolute;
width: 600px;
height: 600px;
border-color: #3333333;
border-width: 1px;
border-style: solid;
line-height: 600px;
vertical-align: middle;
text-align:center;
}
</style>
</head>
<body>
<div id="centred">
<img src="photos/greenTomato.jpg" width="364" height="290">
</div>
</body>
</html>
Mon, 2005-09-19 19:13
#11
how can i center an image in a <div> ?
remove the display: block from img - it's inline by default but you've changed it to block.
Mon, 2005-09-19 19:30
#12
how can i center an image in a <div> ?
:? should be a simple one this, I don't get the display block; image is an inline element, if in a div text-align the div and give it a line-height and vertical-align.
Hugo.
Mon, 2005-09-19 19:47
#13
how can i center an image in a <div> ?
well, the display:block was from the fifth post in the thread
so I took it out and it still doesn't work ...
I put the page online if you want to have a look
http://60gp.ovh.net/~hugoscot/symphonie/alignTest.htm
I have just found this link too but i can't get it to work either
http://www.w3.org/Style/Examples/007/center.html
Mon, 2005-09-19 20:20
#14
how can i center an image in a <div> ?
Is there any reason why one should not center with margins if it works?
Mon, 2005-09-19 21:24
#15
how can i center an image in a <div> ?
no reason at all - but you need to know the size of the margins - in this case the image can be different sizes and i'd have to detect the image size with php or javascript then re-write the margins to account for the different image size
so it is possible but i'd rather just use css to center the image within the div
Mon, 2005-09-19 22:21
#16
how can i center an image in a <div> ?
To clarify...
img{
vertical-align: middle;
}
#centred{
position:absolute;
width: 600px;
height: 600px;
border-color: #3333333;
border-width: 1px;
border-style: solid;
line-height: 600px;
text-align:center;
}
Tue, 2005-09-20 06:14
#17
how can i center an image in a <div> ?
ok thanks for the clarification - i foolishly thought that the vertical-align had to be applied to the container and not the image
anyway - it works perfectly now in FF but not in IE6 - here it is online
http://60gp.ovh.net/~hugoscot/symphonie/alignTest.htm
is there some kind of issue in IE6 that prevents this from working?