17 replies [Last post]
scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

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

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 44 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

how can i center an image in a &lt;div&gt; ?

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

This is my big chance . . . yep, I blew it . . .

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

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

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

how can i center an image in a &lt;div&gt; ?

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

how can i center an image in a &lt;div&gt; ?

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.

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

ok - thanks both of you

I'll give those a try

Laughing out loud

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

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

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

in fact it centers horizontally in Firefox but not IE .... Sad

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 44 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

how can i center an image in a &lt;div&gt; ?

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

This is my big chance . . . yep, I blew it . . .

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

how can i center an image in a &lt;div&gt; ?

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.

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

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>

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

how can i center an image in a &lt;div&gt; ?

remove the display: block from img - it's inline by default but you've changed it to block.

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

how can i center an image in a &lt;div&gt; ?

:? 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.

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

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

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

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 44 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

how can i center an image in a &lt;div&gt; ?

Is there any reason why one should not center with margins if it works?

This is my big chance . . . yep, I blew it . . .

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

how can i center an image in a &lt;div&gt; ?

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;
}

scotty
Offline
Regular
Last seen: 13 years 24 weeks ago
Joined: 2005-09-19
Posts: 22
Points: 0

how can i center an image in a &lt;div&gt; ?

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?